parallax.js
Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
I'm trying to setup a blog for our company and decided to go the Wordpress way. I Set out to completely alter a standard theme so that it could encompass everything we wanted. The blog can be found here http://limsomniacs.limsomnium.com it has only the begining post, nothing fancy yet.
Thing is I wanted to use parallax.js to create a depth field effect using ink splatters so I started out with a far away blurry image of colourful ink splatters.
To my surprise when I added a div inside the wrap div for wordpress it's like it's overlapping just the content div, meaning it does not allow anyone to select text or press the more button and expand the post to its full length...
Parallax.js demands the use of position:fixed and thus i Tried to see if that was the problem but it remains.
Z-index properties using css are completely useless too...
I haven't even started to mess around with the actual .js since anywhere I insert the
<div id="paralelo1"></div>
it simply overcomes and overlaps all the content div...
Can anybody help me out? Maybe you've seen it happen before, would really appreciate the help.
Thanks in Advance
John
Source: (StackOverflow)
Is there a way that I can change my parallax image when an event is fired? I am using parallax.js and I cannot seem to figure out a way.
Here's the HTML:
<div class="bg-page-index">
img_link_1
</div>
<div class="bg-page-index">
img_link_2
</div>
<div class="bg-page-index">
img_link_3
</div>
<div id="hero">
<div class="product-color-list">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
</div>
JS:
$(".color").click(function() {
var indexNum = $(".product-color-list .color").index(this);
sliderInit(indexNum);
});
var $hero = $("#hero"),
$bg_index = $(".bg-page-index"),
bg_init = $bg_index.eq(indexNum).html();
$hero.parallax({
imageSrc: bg_init,
speed: 0.7
});
This works the first time, but it won't work a second time because the parallax.js library changes things around with the element. Does anyone know a better way of doing this, or how to reinitiate the library?
Source: (StackOverflow)
I am trying to use parallax.js with in an ionic view, when I use 'ionic serve' the plugin has the desired effect. But when I install it on a device (ios/android) it doesn't move based on the device motion. Has anyone been able to get this working in an app?
Source: (StackOverflow)
I am new to parallax effects, and I am using parallax.js to work on a new design.
Live example here:
http://codepen.io/simonmoon/pen/f45f0d4ee0024d268d0b5ce5f4107a5d
The issue that I am having is that different browser are displaying the scene completely differently, when it is viewed full screen. It works as intended on chrome, but on firefox the images are larger, the positioning is different, and the body is not hiding the overflow - allowing you to scroll the page which is not intended. In IE the images are larger and the 3 star layers do not move. I have done some research on google but cant find any relevant solutions, and I am honestly not sure what might be causing the differences. Any help would be greatly appreciated.
For completions sake here is the html(jade)
ul#scene
li.layer(data-depth="0.00")
li.layer(data-depth="0.10")
div.starsbg
li.layer(data-depth="0.40")
div.starsmg
li.layer(data-depth="0.60")
div.starsfg
li.layer(data-depth="1.40")
div.chartouter
li.layer(data-depth="1.50")
div.chartinner
li.layer(data-depth="1.80")
div.palmistry
p.title.
Salt Of The Moon
div.texthalo
li.layer(data-depth="14.20")
The css(stylus)
@import url(http://fonts.googleapis.com/css?family=Nunito)
background-size()
-webkit-background-size arguments
-moz-background-size arguments
-o-background-size arguments
background-size arguments
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
body
padding 0
margin 0
height 0px
width 100%
background url('http://i60.tinypic.com/5ofqs5.jpg') no-repeat center center fixed
background-size(cover)
overflow hidden
-moz-overflow hidden
font-family 'Nunito' sans-serif
.textcontain
absolute top 350px
text-align center
width 100%
#scene
absolute top 0 left 0
width 100%
height 1400px
margin auto
li.layer
width 100%
height 100%
list-style-type none
.chartouter
background url('http://i60.tinypic.com/21llf09.png') no-repeat top center
position absolute
top 50%
left 50%
width 880px
height 880px
margin-top -440px
margin-left -440px
.chartinner
background url('http://i59.tinypic.com/1z4e5cj.png') no-repeat center
width 400px
height 400px
absolute top 458px left 50%
margin-left -200px
.palmistry
background url('http://i57.tinypic.com/2i0vrye.png') no-repeat top center
width 600px
height 500px
absolute top 414px left 50%
margin-left -315px
.texthalo
box-shadow(0px 0px 28px 0px rgba(255, 255, 255, 1))
absolute top -200px left -5px
border-radius 50%
width 40px
height 300px
.starsbg
background url('http://i60.tinypic.com/abi9o1.png') center center fixed
background-size(cover)
width 100%
height 100%
.starsmg
background url('http://i61.tinypic.com/2z4wylh.png') left center fixed
background-size(cover)
width 100%
height 100%
.starsfg
background url('http://i58.tinypic.com/280jybr.png') center center fixed
background-size(cover)
width 100%
height 100%
.title
width 10%
margin-left auto
margin-right auto
text-align center
absolute top -150px
font-size 3.2em
-webkit-font-smoothing antialiased
text-shadow rgba(255,255,255,.8) 0px 0px 20px
color white
letter-spacing 8px
and the javascript(note: parrallax.js is being loaded by codepen in the above link, the extra code is a supposed firefox parrallax rendering fix I found here.
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
(function(doc) {
var root = doc.documentElement;
// Not ideal, but better than UA sniffing.
if ("MozAppearance" in root.style) {
// determine the vertical scrollbar width
var scrollbarWidth = root.clientWidth;
root.style.overflow = "scroll";
scrollbarWidth -= root.clientWidth;
root.style.overflow = "";
// create a synthetic scroll event
var scrollEvent = doc.createEvent("UIEvent")
scrollEvent.initEvent("scroll", true, true);
// event dispatcher
function scrollHandler() {
doc.dispatchEvent(scrollEvent)
}
// detect mouse events in the document scrollbar track
doc.addEventListener("mousedown", function(e) {
if (e.clientX > root.clientWidth - scrollbarWidth) {
doc.addEventListener("mousemove", scrollHandler, false);
doc.addEventListener("mouseup", function() {
doc.removeEventListener("mouseup", arguments.callee, false);
doc.removeEventListener("mousemove", scrollHandler, false);
}, false)
}
}, false)
// override mouse wheel behaviour.
doc.addEventListener("DOMMouseScroll", function(e) {
// Don't disable hot key behaviours
if (!e.ctrlKey && !e.shiftKey) {
root.scrollTop += e.detail * 16;
scrollHandler.call(this, e);
e.preventDefault()
}
}, false)
}
})(document);
Source: (StackOverflow)
in a project where I need to build something like the famous parallax-powered Mario Kart Wii Experience site, which also comes with horizontal and vertical scroll (if you haven't seen it, here it is: http://www.nintendo.com.au/gamesites/mariokartwii/#home)
For the scrolling effect, I grabbed the JQuery Scroll Path plugin (website here: http://joelb.me/scrollpath/), and it seems to suit my needs concerning the free scrolling.
The problem comes when I try to include some plugin to generate the parallax effect. I tried several plugins (including Stellar.js, jInvertScroll, Parallax.js, Parallax-JS), but none of them seem to work properly. I assume that there's some kind of relationship between the custom scroll that comes with the Scroll Path plugin and the need of the parallax plugins of working with the navigator scroll to make the effect work.
I searched in Google for some similar situation (i.e., implementing Scroll Path with some parallax plugin) but I didn't find anyone in my current situation, and it seems that the Scroll Path plugin isn't maintained anymore.
Any idea for making it work would be appreciated!
PS: Sorry for the grammar mistakes, I'm still in process of learning english.
Source: (StackOverflow)
I'm working on a project that utilizes [Parallax.js] (https://github.com/wagerfield/parallax) and has an issue that I can't seem to solve. There are no indication in the documentation to destroy/re-init the parallax.
In the documentation, it says that applying data-depth will determined the level of depth when parallax is applied. My web application has a switch button that can change these levels but I can't reapply the new level of depth and reapply the parallax.
I tried a few methods, such as applying the parallax constructor for the second time but that doesn't seem to work. I tried working through re-writing the DOM element and then applying the constructor, also doesn't work.
I tried assigning the parallax object constructor into a variable, and then null-ed it upon the second time but the parallax either didn't start or did not apply the new values.
Help!
Source: (StackOverflow)
I don't know why but the code belows doesn't work in Firefox. It goes perfect in Chrome.
// Buttons marker
$( "#second button" ).click(function() {
$( this ).toggleClass('selected');
$( this ).toggleClass('unselected');
$( this ).toggleClass('btn-warning');
$( this ).toggleClass('btn-default');
});
// Ads switcher
$( "#second button" ).click(function() {
var category = $( this ).attr( "name");
$( ".ad[data-category="+category+"]" ).toggle( "slow" );
});
// Hide all categories but newmotos when load website
$( document ).ready(function() {
$( ".ad[data-category=usedmotos" ).hide();
$( ".ad[data-category=spares" ).hide();
$( ".ad[data-category=accessories" ).hide();
});
Any suggestion? I thought that JQuery were multiplatform :/
EDIT: The code should hide some divs with the selected data-category and provide the power to show them with some buttons on the top.
I'm using other JS codes in the same webpage and these ones are working, I think this is important, because it's not crashing all the Javascript.
And Firebug dosen't say me nothing :(
EDIT 2: Adding my html. The code is the main of body only, I guess other isn't necessary.
<div id="main" role="main">
<!-- Section #1 / Cover -->
<section id="first" class="story" data-speed="8" data-type="background" data-offSetY="-432">
<article>
<h2>Tienda</h2>
</article>
</section>
<!-- Section #2 / Keycloud -->
<section id="second" class="point heads">
<article>
<div class="text">
<h5>Nube de palabras. Aquí van las palabras, selecciónalas. Y tal y eso y se marcarán, ya tu sabeh.</h5>
<h6>Básicamente es cómo funciona este sistema para ver tus peaso motos.</h6>
</div>
<div class="btn-group-vertical">
<div><span>CATEGORÍAS:</span></div>
<button type="button" class="selected btn btn-warning" name="newmotos">Motos nuevas</button>
<button type="button" class="selected btn btn-warning" name="usedmotos">Motos de ocasión</button>
<button type="button" class="selected btn btn-warning" name="spares">Recambios</button>
<button type="button" class="selected btn btn-warning" name="accessories">Accesorios</button>
</div>
</article>
</section>
<!-- Section #3 / Bulletin -->
<section id="third" class="point heads">
<h4 class="line-divider">ANUNCIOS</h4>
<article>
<div class="ad" data-category="newmotos">
<a rel='nofollow' href="images/ads/ad01/1.jpg" rel="lightbox-ad01"><img src="images/ads/ad01/1.jpg" /></a>
<a rel='nofollow' href="images/ads/ad01/2.jpg" rel="lightbox-ad01"></a>
<a rel='nofollow' href="images/ads/ad01/3.jpg" rel="lightbox-ad01"></a>
<a rel='nofollow' href="images/ads/ad01/4.jpg" rel="lightbox-ad01"></a>
<a rel='nofollow' href="images/ads/ad01/5.jpg" rel="lightbox-ad01"></a>
<a rel='nofollow' href="images/ads/ad01/6.jpg" rel="lightbox-ad01"></a>
<div>
<h6>Piaggio Liberty 49cc</h6>
<p>Se vende motor en muy buen estado, procendete de un golpe tambien todo el despiece de esta moto y el de una 49! saludos! motores desde 250 euros! </p>
<fieldset>
<span class="label label-success">250€</span>
<span class="label label-default">49cc</span>
<span class="label label-info">5.000km</span>
<span class="label label-warning">Blanca</span>
</fieldset>
</div>
</div>
<div class="ad" data-category="usedmotos">
<img src="images/ads/aprilia.jpg" />
<div>
<h6>Aprilia RS 49cc</h6>
<p>Vendo moto varata de serie solo pasarle la itv y yasta 550€ negociables interesados Atiendo wasap.. Color negro </p>
<fieldset>
<span class="label label-info">550€</span>
<span class="label label-info">49cc</span>
<span class="label label-default">15.000km</span>
<span class="label label-default">Negra</span>
</fieldset>
</div>
</div>
<div class="ad" data-category="spares">
<img src="images/ads/puente.jpg" />
<div>
<h6>Puente culata Kawasaki 450 </h6>
<p>Vendo puentes de los arboles de lebas de culata de KAWASAKI KXF valido para KXF 450 del 2006 al 2008 </p>
<fieldset>
<span class="label label-default">150€</span>
<span class="label label-default">Modelo 450</span>
<span class="label label-default">2006</span>
</fieldset>
</div>
</div>
</article>
</section>
EDIT 3: The web it's not loading the 'ads-controller.js' the file where the code is. The code belows is how I insert the JS files.
</div> <!-- // End of #main -->
<!-- Our Javascript, starting with jQuery -->
<script src='js/libs/jquery-1.6.1.min.js'></script>
<script src="js/libs/slimbox/slimbox2.js"></script>
<script src="js/ads-controller.js"></script>
<script src="js/scroller.js"></script>
<script src="js/parallax.js"></script>
SOLVED: It was the extension 'Ad Blocker'. Because the 'ads' in the file name. I just renamed as 'controller.js' and works perfectly. Thanks everybody!
Source: (StackOverflow)
I just made a responsive animation with the help of Parallax.js. Also i used bootstrap 2 to make responsive and working in mobile devices also. What i made is here...
my code is
<style>
.container ,.container img {
position: fixed;
}
.container {
width: 1404px;
margin-left: -30px;
margin-top: -22px;
}
</style>
</head>
<body>
<div class="container">
<ul id="scene" class="scene">
<li class="layer" data-depth="0.10">
<img src="img/back.png" alt="">
</li>
<li class="layer" data-depth="0.60" style="z-index:1;">
<img src="img/page.png" alt="">
</li>
<li class="layer" data-depth="0.06">
<img src="img/tree.png" alt="">
</li>
</ul>
<ul id="scene1" class="scene">
<li class="layer" data-depth="0.20" style="z-index:-1;">
<img src="img/alien.png" alt="">
</li>
<li class="layer" data-depth="0.40" style="z-index:2;">
<img src="img/money.png" alt="">
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.parallax.min.js"></script>
<script>
$('#scene1').parallax({
invertX: true
});
$('#scene').parallax({
invertX: false
});
</script>
now problem is the image size should be large and fixed. so i have to use position:fixed and width: some large value but by doing that i loose the responsiveness of my div container. So is there anyway to make this work so that it remain responsive along with fixed positioning and width. help me ASAP. thanks
Source: (StackOverflow)
Im trying to create a hidden navigation bar that, when hovered over, grows in width, and when the cursor leaves the navigation bar it shrinks back down to its original width. I'm using jQuery and Parallax.js but no combination of mouseenter or mouseleave etc seems to work. As an example of what i am trying to do follow the link:
http://www.glamour.biz/
basically i want to do the same top navigation but on the left side of my page. This is my javascript:
$("#navigation").mouseenter(function(){
$("#navigation").animate({
opacity: 1,
width: "200px"
},500,"swing"
);
$("#navigation ul").animate({
opacity: 1,
},500,"swing"
);
});
$("#navigation > ul").mouseleave(function(){
$("#navigation").animate({
opacity: .75,
width: "40px"
},500,"swing"
);
$("#navigation ul").animate({
opacity: 0,
},500,"swing"
);
});
The following is my HTML:
<div id="navigation">
<ul>
<li id="aboutb">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Resume</li>
</ul>
</div>
I basically run into the problem of the div running through the animation more than once, or it won't stay expanded while i am hovered over the div. I do have another page wide div behind this navigation bar div.
thanks for any help!
Source: (StackOverflow)
First of all, I don't have any code yet, as I'm asking what's the best way to achieve this.
I'm developing a website which has an image on the left hand side that has a slight 3D rotation:
What I'd like to do is change it's perspective on window width change, until it's like flat:
The idea is that on desktop PCs the image is on the left with the rotation, while on narrower screen widths the image is turned flat.
I've considered using the following methods:
CSS sprite + CSS media queries:
I'm not really convinced about using this, as in this way I think that I will not have a sort of "moving" effect when the window is resized, unless I create a media query for every 5px and create a very long image to cut
CSS transform?
Not sure if it's possible to create a sort of 3D effect to an image using only CSS and change the 3D value on window resize without using the above mentioned method
jQuery plugin
I don't know if there's something that allows my to achive this as jquery plugin, any suggestion?
Parallax.js
I've never used parallax, but it seams like you can move elements on the screen in various way, do you think it will be possible to use parallax for what I need?
I Hope my question is clear enough, sorry again for no code, but this is still in proof-of-concept stage.
Please ask for any clarifications.
Thanks and have a good day.
Source: (StackOverflow)
I would like to use the presentation script impress.js (http://bartaz.github.com/impress.js/#/its) to create a website. Now I would like to also use parallax.js (http://stephband.info/jparallax/) to create a parallax effect using all the images in one "step" of the presentation. Now I am struggling when trying to include the parallax effect into the impress.js. The problem seems to be that impress.js is in a 3D space while parallex.js uses margin and position to move the elements.
Now my question is, does anybody have experience in combining these two tools or might have an idea which parallex effect might work in a 3D space?
Source: (StackOverflow)
I am trying to create a sort of parallax effect, I what the section after "ABOUT" containing two different div with image to scroll faster than the rest of the page. I want that whole div to scroll faster so that it looks like the first drawn picture is being wiped up but the similar picture.
Test site: http://www.onepixelroom.com/AQUODI/ (the section just after "ABOUT")
Example, scroll down (a lot, yes, it's annoying :) this site to see the footballer guys change color, I want to do this with both my images: http://www.tridentpp.com/
HTML:
<div id="quote-selector-div">
<div id="quote-images">
<div class="quote-selector-div-img"></div><div class="quote-selector-div-blue"></div>
</div>
</div>
CSS:
#quote-selector-div {
height: 800px;
position:relative;
overflow:hidden;
}
#quote-images {
height: 800px;
position:relative;
}
.quote-selector-div-img{
height: 400px;
background: url(../img/living-room-blue.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow:hidden;
position:relative;
}
.quote-selector-div-blue {
background: url(../img/living-room.jpg) no-repeat center center fixed;
height: 400px;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
}
the page is using parallax.js, but it only works on background picture, I would like that same effect on a whole div, or a better solution.
Source: (StackOverflow)
Setting up parallax.js I ran into this:
The html source markup (in the official GIThub project) is:
<ul id="scene" class="scene">
<li class="layer" data-depth="1.00"><img src="images/layer1.png"></li>
<li class="layer" data-depth="0.80"><img src="images/layer2.png"></li>
<li class="layer" data-depth="0.60"><img src="images/layer3.png"></li>
<li class="layer" data-depth="0.40"><img src="images/layer4.png"></li>
<li class="layer" data-depth="0.20"><img src="images/layer5.png"></li>
<li class="layer" data-depth="0.00"><img src="images/layer6.png"></li>
</ul>
But if we look at the (really awesome) Wagerfield example it looks like the images are brought in as a background image of a div block inside each .layer class element.
The explanation I can give myself is that in this way the image can be controlled more flexibly,
I'm just starting out with JS so I really can't find a workaround:
but couldn't the script transform this
<img src="images/layer1.png">
into something like:
<div class="layer1" style="background:url(images/layer1.png) no-repeat 50% 100%"></div>
Can this be achieved easily?
Extending the question it would be cool to entirely style the .layer with inline styles passed through the script.
Script so far:
jQuery("li.layer > img").replaceWith
("<div class=\"" + $((("li.layer > img").src).replace(/\.[^/.]+$/, "")) + "\"</div>" );
this part isn't working (i'm looking for the url output of images..):
(("li.layer > img").src).replace(/\.[^/.]+$/, "")
Source: (StackOverflow)
I trying to create a basic parallax scrolling example with text and color; no images. However the effect doesn't seem to work. Here is the code:
<!doctype html>
<html>
<head>
<title>Parallax Scrolling</title>
</head>
<style type="text/css">
body{
margin:0;
padding:0;
}
#img1 {
background: rgb(44,89,238) 50% 0 repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#img2 {
background: rgb(252,151,20) 50% 0 repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
p {
height: 458px;
position: absolute;
top: 291px;
width: 100%;
font-size: 100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$(document).ready(function(){
var $window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
var coords = '50% '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });
});
});
});
</script>
<body>
<section id="img1"><p>Hello</p></section>
<section id="img2"><p>Hello</p></section>
</body>
</html>
I have tried to edit the css but nothing seems to be working. Please help.
Source: (StackOverflow)