stellar.js
Stellar.js - Parallax scrolling made easy
Stellar.js
Is there a way to turn stellar.js on and off in code? I've tried to call "stellar" method with different parameters but seems like it only works once:
$(document).ready(function() {
$.stellar({
verticalScrolling: true,
verticalOffset: 0,
});
$.stellar({
verticalScrolling: false, // is not turning scrolling off
verticalOffset: 0,
});
});
Source: (StackOverflow)
I am using stellar.js for this website - www.jaisalmera.com - how do I disable the parallax for safari and internet explorer browsers? I have already disabled it for mobile devices with this -
if ($(window).width() > 800) {
$(window).stellar();
}
Can someone let me know how to do this for Safari / IE browsers also? From research I have seen that the parallax scrolling doesn't work for these.
Thank you!
Source: (StackOverflow)
I have just started working with stellar.js (Parallax jQuery library), and it seems pretty easy to use, however it is really jerky/jumpy when you scroll with the mouse wheel (less so when you drag the browser scrollbar manually. Oddly, it is perfectly smooth when uploaded to JSFiddle.
Has anyone encountered this issue before and know what the likely cause could be looking at my code? Please feel free to download the code from JSFiddle and recreate locally to see if you get the same issue, or if you spot anything obvious on my Fiddle, help would be appreciated.
For reference, this problem occurs in Chrome (version 32 here).
CSS
body { background: url(https://www.google.co.uk/images/srpr/logo11w.png) no-repeat; background-size: 100% ; }
section.one { position: relative; border-bottom: 5px solid #000; }
.one .div1 { background: #ccc; width: 200px; height:300px; position: absolute; top: 200px; overflow: hidden; }
.one .div2 { background: #eee; width: 200px; height:200px; position: absolute; top: 100px; left: 100px; }
.one .div3 { background: #aaa; width: 200px; height:200px; position: absolute; top: 100px; left: 150px; }
section.two { position: relative; border-bottom: 5px solid #000; overflow: hidden; }
.two .div1 { background: #ccc; width: 200px; height:300px; position: absolute; top: 200px; }
.two .div2 { background: #eee; width: 200px; height:200px; position: absolute; top: 100px; left: 100px; }
.two .div3 { background: #aaa; width: 200px; height:200px; position: absolute; top: 100px; left: 150px; }
JavaScript/jQuery
$(document).ready(function(){
$.stellar()
});
HTML
<body data-stellar-background-ratio="0.1">
<section class="one">
<div class="div1" data-stellar-ratio="1"></div>
<div class="div2" data-stellar-ratio=".5"></div>
<div class="div3" data-stellar-ratio=".3"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
<section class="two">
<div class="div1" data-stellar-ratio="1"></div>
<div class="div2" data-stellar-ratio=".5"></div>
<div class="div3" data-stellar-ratio=".3"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
</body>
Source: (StackOverflow)
The issue is as follows: backgrounds do not float slowly on scroll, they just change each other smoothly, but there is no 'depth effect' as I've seen in several demos.
I would usually follow this example
http://www.youtube.com/watch?v=NUsEGbSbMZ4. So what he has is kind of plain white panel with text that shifts over steering wheel image, but wheel image moves slightly itself. This is exactly what I can't reach.
Is there any solution?
index.php
<div class="slide" id="slide1" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6"><h1></h1></div>
</div>
</div>
<a class="button" rel='nofollow' href="" title=""></a>
</div>
custom.css
.slide {
background-attachment: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
position: relative;
}
#slide1 {
background-image: url(../img/slide1/green-grapes.jpg);
background-size: cover;
}
#slide2 {
background-image: url(../img/slide2/indian-market.jpg);
background-size: cover;
}
#slide3 {
background-image: url(../img/slide3/floating-market.jpg);
background-size: cover;
}
main.js
$(function() {
$.stellar({
verticalScrolling: true,
parallaxBackgrounds: true,
responsive: true,
scrollProperty: 'scroll',
positionProperty: 'position'
}).stellar('refresh');
});
Source: (StackOverflow)
recently, my site is using stellar.js and I want to find a way to make the left side is scrolling up and the right side going opposite. However, the right element is display nicely in position:absolute. The red background locates on the right side which is what I want, but the element is not. Also, the right side will contains many individual divs. The best reference is National LGBT museum site. Any suggestion? Thanks in advance.
HTML
<div id="container2">
<div id="wrap1">
<div data-stellar-ratio="1">Hi</div>
</div>
<div id="wrap2">
<div>
<div data-stellar-ratio="-1">hi</div>
<div data-stellar-ratio="-1">hi</div>
</div>
</div>
</div>
CSS:
#container2
{overflow:auto;
height:4480px;
width:100%;
float:left;}
#wrap1
{height: 3000px;
overflow:hidden;
float:left;
width:50%;
background-color: black;}
#wrap1 div {
width: 10px;
height: 800px;
margin-top:0px;
background-color: blue;}
#wrap2 {
overflow:auto;
height: 3000px;
overflow:hidden;
display: block;
float:left;
width:50%;
background-color: red;}
#wrap2 div {
position:absolute;
float:left;
left:50%;
width: 10%;
height: 640px;
background-color:green;
z-index: 999;
border:5px solid black;}
Source: (StackOverflow)
I'm using the Canvas HTML5 template, and have an instance where I need a parallax background image to move up within its div, not down, as the user scrolls down the page. Can't find the answer anywhere. (Giving a negative value to the data-stellar-background-ratio does not work, as suggested by some.) I've seen this question asked a lot, but no answers. Would be so grateful for the help. Thanks.
Source: (StackOverflow)
So I'm trying to implement stellar.js but it must be initialized after an each loop is finished. The loop must add data attributes to the images that are going to be made parallax by the plugin.
The images are in a list:
<ul>
<li class="item">
<div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_7706-1300x866.jpg"></div>
</li>
...
</ul>
I must add data-stellar-vertical-offset attribute to each of them that will offset the image by half of its height, so it can be vertically centered initially.
Here is the JS:
/* Inserting the background image */
$('.item-image').each(function () {
var $this = $(this);
$this.css('background-image', 'url(' + $this.data('image') + ')');
})
/* Creating loop that will run as many times as items are in there */
var items = $('.item-image').length;
var currentItem = 0;
$('.item-image').each(function () {
var $this = $(this);
/* Taking the origin height, halving it and putting it as offset so the image can be vertically aligned */
var img = new Image();
img.src = $(this).data('image');
img.onload = function () {
var H2 = this.height;
$this.attr('data-stellar-vertical-offset', -(H2 / 2));
}
currentItem++;
/* Initializing the plugin after every item is looped */
if (currentItem >= items) {
$.stellar();
}
})
However when the plugin is initialized it isn't using the data attribute. If it's put in a timeout like this:
if (currentItem >= items) {
setTimeout(function () {
$.stellar();
}, 10)
}
.. it works but it seems to me like an ugly hack. Is there a better way for this to be done?
Here is a jsfiddle: http://jsfiddle.net/9f2tc/1/
Source: (StackOverflow)
I have three div elements to scroll with parallax effect relative to their parent div.
<div class="section" id="social">
<div data-stellar-ratio="0.6" class="w-line"></div>
<div data-stellar-ratio="0.7" class="b-line"></div>
<div data-stellar-background-ratio="0.5" class="il"></div>
</div>
The .il div has a background which is scolled well in parallax. The .w-line and .b-line divs have their dashed borders which are also scrolled well in parallax. BUT these two divs have initially top 500px and 400px in the css file but when i start to scroll, these initial top values change and the elements jump to another top value starting the scroll from that new top point.
CSS
#social {
position: relative;
overflow: hidden;
min-height: 100vh;
background: url(../uploads/parallax.jpg) no-repeat fixed center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.il {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
z-index: 3;
width: 100%;
height: 100%;
background: url(../uploads/il.png) 0px 0px no-repeat fixed;
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-ms-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
.b-line {
position: relative;
left: -50px;
top: 400px;
width: 150%;
border-bottom: 2px dashed #333333;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}
.w-line {
position: relative;
left: -50px;
top: 500px;
width: 150%;
border-bottom: 2px dashed #f0efeb;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
The jquery
<script type="text/javascript">
$(document).ready(function() {
// run parallax
$('#social').stellar();
$.stellar({
// Set scrolling to be in either one or both directions
horizontalScrolling: false,
verticalScrolling: true,
// Set the global alignment offsets
horizontalOffset: 0,
verticalOffset: 0,
// Refreshes parallax content on window load and resize
responsive: true,
// Select which property is used to calculate scroll.
// Choose 'scroll', 'position', 'margin' or 'transform',
// or write your own 'scrollProperty' plugin.
scrollProperty: 'scroll',
// Select which property is used to position elements.
// Choose between 'position' or 'transform',
// or write your own 'positionProperty' plugin.
positionProperty: 'position',
// Enable or disable the two types of parallax
parallaxBackgrounds: true,
parallaxElements: true,
// Hide parallax elements that move outside the viewport
hideDistantElements: true,
// Customise how elements are shown and hidden
hideElement: function($elem) { $elem.hide(); },
showElement: function($elem) { $elem.show(); }
});
});
</script>
If you can tell me how to avoid jumping to another top value and start scrolling from the initial top point...
Source: (StackOverflow)
I am using the plugin stellar.js to create a parrallax effect... Esentially I want a simple background scroll slower than the rest of the site like www.OmarHabash.com.
I think everything is set up correctly this is the site that I am working on.... The first three spotlight divs are scrolling slower than but it seems to gradually speed up... It is not supposed to do that.
This is the init that I am using
$(window).stellar();
and this is one of three divs that I am using the script on.
<div class="home-100-2" data-stellar-background-ratio="1.1" style="background: url('<?php the_field('sl-image-2') ?>')fixed;">
if you look at the site you will see the problem. http://dfwima.4mf.co/
Source: (StackOverflow)
Let us say I want to design a website with four slides. I would like each slide to cover the previous one while the visitor is scrolling. Following is an attempt with stellar.js (a jquery plugin): http://jsfiddle.net/8mxugjqe/. You can see that it works for the first slide, which gets covered by the second one, but I could not have it work for the others.
HTML:
<body>
<div id="one" data-stellar-ratio=".2">
<p>This is the first div.</p>
</div>
<div id="two" data-stellar-ratio="1">
<p>This is the second one.</p>
</div>
<div id="three">
<p>Third one!</p>
</div>
<div id="four">
<p>Fourth and last.</p>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
#one, #two, #three, #four {
position: absolute;
height: 100%;
width: 100%;
font-size: 5em;
}
p {
margin: 1em;
width: 60%;
}
#one {
background: red;
}
#two {
background: blue;
top: 100%;
}
#three {
background: green;
top: 200%;
}
#four {
background: yellow;
top: 300%;
}
Source: (StackOverflow)
I'm trying to implement stellar.js into my site to add a parallax effect to a div with a background image. The div has a class "header-wrapper", I've followed everything to the letter as far as I can see, yet nothing is happening. Can anyone see any glaringly obvious reason why this might not work? Here is the Js that I am using:
$(function(){
$('.header-wrapper').stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
And the error being returned is:
Uncaught TypeError: Cannot read property 'stellar' of undefined
The site in question is here: http://www.skizzar.com/chadedwards and the parallax effect should be applied to the image at the top of the page. Any help would be much appreciated.
Source: (StackOverflow)
I have been looking for a way to make objects move horizontally on vertical scrolling.
I found this great answer from plugin's author.
So the code to move things horizontally looked something like this:
$.stellar.positionProperty.apple = {
setTop: function($el, newTop, originalTop) {
$el.css({
'top': newTop,
'left': $el.hasClass('apple') ? originalTop - newTop : 0
});
},
setLeft: function($el, newLeft, originalLeft) {
$el.css('left', newLeft);
}
};
The issue with this is that it only covers horizontal scrolling from the left side. But it also affects another elements, even if they don't have the apple class from the example script.
So if I have an image for example:
<section>
<img></img>
</section>
Where image is absolute positioned and right:0; as soon as you add data-stellar-ratio to it, this script will push the element to the left side, even if the image haven't the class "apple"
Is there any way to define on the script that images with class "left" scrolls from left and then images with class "right" scrolls from the right hand side?
Source: (StackOverflow)
I am currently in the process of creating a parallax theme. I love this ideahttp://whiteboard.is/ for the nav however I'm not to sure how to go about it.
I don't have a current website to show you as it's still being created. It is a simple parallax design using tags and stellar.js.
Any advice or links to tutorials would be amazing!
Source: (StackOverflow)
My website is using Stellar.js to create a parallax effect on a number of images that cover the width of the users screen. Stellar scrolls across the image at half the speed the user scrolls down the page creating a nice effect. I originally used this code:
MY CSS FILE
/* Separator About - Parallax Section */
.sep {
background-attachment: fixed!important;
background-position: 50% 0!important;
background-repeat: no-repeat!important;
width: 100%!important;
height: 180px!important;
position: relative!important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.about {
background-image: url(../img/about-sep.jpg);
MY HTML FILE
<! -- ABOUT SEPARATOR -->
<div class="sep about" data-stellar-background-ratio="0.5"></div>
</div>
</div>
<script src="assets/js/jquery.stellar.min.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</body>
I discovered if I change background attachment from fixed to scrolled, the parallax effect would work on both desktop and ios. Although a little choppy on ios, and tricky to configure when user is switching between landscape and portrait. For this reason - made stellar responsive, which seems to help. New code is:
//JAVASCRIPT
$(function(){
$.stellar({
horizontalScrolling: false,
// Refreshes parallax content on window load and resize
responsive: true,
verticalOffset: 40
});
});
//CSS
.sep {
background-attachment: scroll;
background-position: 50% 0;
background-repeat: no-repeat;
height: 180px;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.about {
background-image: url(../img/about-sep.jpg);
//HTML
<div class="sep about" data-stellar-background-ratio="0.5"></div>
</div>
</div>
If I decide that it is too choppy/unpredictable on mobile - I could add this code to my javascript:
// Stellar Parallax Script
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if( !isMobile.any() )
$(function(){
$.stellar({
horizontalScrolling: false,
// Refreshes parallax content on window load and resize
responsive: true,
verticalOffset: 40
});
});
This code successfully gives me a static image with same dimensions on mobile - and gives me the parallax scroll effect on desktops.
Source: (StackOverflow)
My rails 4 app breaks stellar.js after link_to.
I know that is something related with turbolinks.
I installed jquery.turbolinks and my js functions from uikit are all working now.
But the stellar.js still don't..
It works when I type the address in browser: 0.0.0.0:3000, but do not after clicking any link.
I am calling stellar.js from my assets/javascripts/my-js.js like this:
$(function(){
$.stellar();
});
I also tried with no success:
function initialize() {
$.stellar();
}
$(document).ready(initialize);
$(document).on('page:load', initialize);
Thank you
Source: (StackOverflow)