superscrollorama
The original jQuery plugin for supercool scroll animation. NOTE: No longer under active development. New version is ScrollMagic.js
SUPERSCROLLORAMA
I am trying to write simplified javascript to run a specific example from a link.
The example I want to use is the 'showcase' section where the title, 'showcase' fades in and the images appear. I wish to extract related html and javascript to run that.
I downloaded the example file and managed to cut down unnecessary html.
<div id="showcase">
<h1>Showcase</h1>
<p>Check out these great websites to see SuperScrollorama in action</p>
<div class="gallery clearfix">
<figure>
<a rel='nofollow' href="http://www.zivotjednekuchyne.cz">
<img src="gallery/ikea.jpg" alt="Ikea, Life of One Kitchen">
</a>
<figcaption>Ikea, Life of One Kitchen<br />
<small><a rel='nofollow' href="http://www.smashingawards.com/design/life-of-one-kitchen/">Smashing Award Winner</a></small>
</figcaption>
</figure>
<figure>
<a rel='nofollow' href="http://lifeisvertical.alpina-since1883.com">
<img src="gallery/alpina.jpg" alt="Alpina - Life Is Vertical">
</a>
<figcaption>Alpina - Life Is Vertical<br />
<small><a rel='nofollow' href="http://www.cssdesignawards.com/css-web-design-award-winner.php?id=20048">CSS Design Award Winner</a></small>
</figcaption>
</figure>
<figure>
<a rel='nofollow' href="http://www.nouvelleoctavia.fr">
<img src="gallery/skoda.jpg" alt="New Škoda Octavia">
</a>
<figcaption>New Škoda Octavia<br />
<small><a rel='nofollow' href="http://cssawards.net/new-skoda-octavia/">CSS Awards Site of the Day</a></small>
</figcaption>
</figure>
<figure>
<a rel='nofollow' href="https://corporate.target.com/about/design-innovation/owned-brands/">
<img src="gallery/target.jpg" alt="Target Exclusive Brands Site">
</a>
<figcaption>Target Exclusive Brands</figcaption>
</figure>
<figure>
<a rel='nofollow' href="http://www.zippergaleria.com.br/pt/">
<img src="gallery/zipper.jpg" alt="Zipper Galleria">
</a>
<figcaption>Zipper Galleria<br />
<small><a rel='nofollow' href="http://www.awwwards.com/web-design-awards/zipper-galeria">Awwwards Site of the Day Winner</a></small>
</figcaption>
</figure>
<figure>
<a rel='nofollow' href="http://inception-explained.com">
<img src="gallery/inception.jpg" alt="Inception Explained">
</a>
<figcaption>Inception Explained<br />
<small><a rel='nofollow' href="http://designtaxi.com/news/351985/Finally-The-Complex-Plot-of-Inception-Explained/">Featured on TAXI</a></small>
</figcaption>
</figure>
<figure>
<a rel='nofollow' href="http://finnsjourney.de">
<img src="gallery/finnsjourney.jpg" alt="Finn’s Journey">
</a>
<figcaption>Finn’s Journey</figcaption>
</figure>
<figure>
<a rel='nofollow' href="http://public.orsi-and-jan.info/home">
<img src="gallery/jan.jpg" alt="Orsi and Jan">
</a>
<figcaption>Orsi & Jan’s Wedding</figcaption>
</figure>
<figure>
<a rel='nofollow' href="http://innovation.kenmore.com/explore/">
<img src="gallery/kenmore.jpg" alt="Kenmore Innovations">
</a>
<figcaption>Kenmore Innovations</figcaption>
</figure>
</div>
However, I just can't simplified javascript. I wish to have lines that associated with 'showcase' part. The following is the full version.
$(document).ready(function() {
$('body').css('visibility','visible');
// hide content until after title animation
$('#content-wrapper').css('display','none');
// lettering.js to split up letters for animation
$('#title-line1').lettering();
$('#title-line2').lettering();
$('#title-line3').lettering();
// TimelineLite for title animation, then start up superscrollorama when complete
(new TimelineLite({onComplete:initScrollAnimations}))
.from( $('#title-line1 span'), .4, {delay: 1, css:{right:'1000px'}, ease:Back.easeOut})
.from( $('#title-line2'), .4, {css:{top:'1000px',opacity:'0'}, ease:Expo.easeOut})
.append([
TweenMax.from( $('#title-line3 .char1'), .25+Math.random(), {css:{top: '-200px', right:'1000px'}, ease:Elastic.easeOut}),
TweenMax.from( $('#title-line3 .char2'), .25+Math.random(), {css:{top: '300px', right:'1000px'}, ease:Elastic.easeOut}),
TweenMax.from( $('#title-line3 .char3'), .25+Math.random(), {css:{top: '-400px', right:'1000px'}, ease:Elastic.easeOut}),
TweenMax.from( $('#title-line3 .char4'), .25+Math.random(), {css:{top: '-200px', left:'1000px'}, ease:Elastic.easeOut}),
TweenMax.from( $('#title-line3 .char5'), .25+Math.random(), {css:{top: '200px', left:'1000px'}, ease:Elastic.easeOut})
])
.to( $('#title-info'), .5, {css:{opacity:.99, 'margin-top':0}, delay:-1, ease:Quad.easeOut});
function initScrollAnimations() {
$('#content-wrapper').css('display','block');
var controller = $.superscrollorama();
// title tweens
$('.title-line span').each(function() {
controller.addTween(10, TweenMax.to(this, .5, {css:{top: Math.random()*-200-600, left: (Math.random()*1000)-500, rotation:Math.random()*720-360, 'font-size': Math.random()*300+150}, ease:Quad.easeOut}),200);
});
controller.addTween(10, TweenMax.to($('#title-line1'), .75, {css:{top: 600}, ease:Quad.easeOut}),200);
controller.addTween(10, TweenMax.to($('#title-line2'), .75, {css:{top: 200}, ease:Quad.easeOut}),200);
controller.addTween(10, TweenMax.to($('#title-line3'), .75, {css:{top: -100}, ease:Quad.easeOut},200));
// showcase tweens
controller.addTween('#showcase h1', TweenMax.from( $('#showcase h1'), .75, {css:{letterSpacing:20,opacity:0}, ease:Quad.easeOut}));
controller.addTween('#showcase p', TweenMax.from( $('#showcase p'), 1, {css:{opacity:0}, ease:Quad.easeOut}));
$('#showcase .gallery figure').css('position','relative').each(function() {
controller.addTween('#showcase .gallery', TweenMax.from( $(this), 1, {delay:Math.random()*.2,css:{left:Math.random()*200-100,top:Math.random()*200-100,opacity:0}, ease:Back.easeOut}));
});
// hire tweens
$('#hire h3').lettering().find('span').css('position','relative').each(function() {
controller.addTween('#hire h3', TweenMax.from( $(this), .25, {delay:Math.random()*.2,css:{left:Math.random()*1200-600,top:Math.random()*600-300,opacity:0}, ease:Expo.easeOut}),200);
});
controller.addTween('#hire p', TweenMax.from( $('#hire p'), .5, {css:{opacity:0}}));
// individual element tween examples
controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}));
controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));
controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}));
controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing
// set duration, in pixels scrolled, for pinned element
var pinDur = 4000;
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
pinAnimations
.append(TweenMax.from($('#pin-frame-pin h2'), .5, {css:{marginTop:0}, ease: Quad.easeInOut}))
.append([
TweenMax.to($('#pin-frame-slide'), 1, {css:{marginLeft:0}}),
TweenMax.to($('#pin-frame-pin'), 1, {css:{marginLeft:'100%'}})
], .5)
.append([
TweenMax.to($('#pin-frame-wipe'), .5, {css:{top:0}}),
TweenMax.from($('#pin-frame-wipe h2'), .5, {css:{marginTop:'-600px'}})
], .5)
.append(TweenMax.from($('#pin-frame-bounce'), 5, {css:{marginTop:'-100%'}, ease:Bounce.easeOut}), .5)
.append(TweenMax.from($('#pin-frame-color'), .25, {css:{opacity:0}}), .5)
.append([
TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'blue'}}),
TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'orange'}})
])
.append([
TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'green'}}),
TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'red'}})
])
.append([
TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'yellow'}}),
TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'purple'}})
])
.append([
TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'orange'}}),
TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'blue'}})
])
.append([
TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'red'}}),
TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'green'}})
])
.append([
TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'#222438'}}),
TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'#FFB000'}})
])
.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
// pin element, use onPin and onUnpin to adjust the height of the element
controller.pin($('#examples-pin'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#examples-pin').css('height','100%');
},
onUnpin: function() {
$('#examples-pin').css('height','600px');
}
});
controller.pin($('#examples-2'), 3000, {
anim: (new TimelineLite())
.append(
TweenMax.fromTo($('#fling-it'), 2,
{css:{left:-1000, top: 500, rotation: -360}, immediateRender:true},
{css:{left:2000, top: -600, rotation: 360}})
)
.append(
TweenMax.fromTo($('#move-it'), .75,
{css:{left: -200, top: 800}, immediateRender:true},
{css:{top: -200}}),
-1.5 // offset for better timing
)
.append(
TweenMax.to($('#move-it'), .5,
{css:{left: 200}})
)
.append(
TweenMax.to($('#move-it'), .5,
{css:{top: 0}})
)
.append(
TweenMax.to($('#move-it'), .5,
{css:{left: 0}})
)
})
// parallax example, setting duration ties animation to scroll position
// you can target a scroll position instead of an element (whose position can change)
controller.addTween(
'#examples-parallax',
(new TimelineLite())
.append([
TweenMax.fromTo($('#parallax-it-left'), 1,
{css:{top: 200}, immediateRender:true},
{css:{top: -600}}),
TweenMax.fromTo($('#parallax-it-right'), 1,
{css:{top: 500}, immediateRender:true},
{css:{top: -1250}})
]),
1000 // scroll duration of tween
);
$('#bring-it').lettering();
controller.addTween(
'#bring-it',
(new TimelineLite())
.append([
TweenMax.from($('#bring-it .char1'), 1,
{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
TweenMax.from($('#bring-it .char2'), .6,
{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
TweenMax.from($('#bring-it .char3'), 1.1,
{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
TweenMax.from($('#bring-it .char4'), .7,
{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
TweenMax.from($('#bring-it .char5'), .9,
{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
TweenMax.from($('#bring-it .char6'), 1.2,
{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
TweenMax.from($('#bring-it .char7'), .6,
{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
TweenMax.from($('#bring-it .char8'), .8,
{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut})
])
,
1200,
-100 // offset for better timing
);
}
});
Source: (StackOverflow)
On a Wordpress site I am currently working on, my client wanted the different sections of the front page to slide up from the bottom and cover up the previous section, like a wipe or slide transition. Using super scrollorama found here: http://johnpolacek.github.com/superscrollorama/, I managed to achieve the desired result.
Next, I needed to create a navigation menu on the front page only. I did so, and set anchors at various different points on the pages. I also used the scrollTo library for scolling animations when I click the nav menu links. However, there are a number of problems I have encountered:
- When at the top and I click "showcase", it brings me down to the showcase section, but the products section (the div right after it) is overlapping it.
- Other divs seems to have the same problem of the following divs overlapping the current one
- I can only navigate forwards. When I try to go backwards, it won't (except for "Home")
- I thought it might have something to do with the CSS "top" property of the divs, so I tried resetting them every time the click function kicked in, but it didn't work. So I removed it for the time being.
- Currently set the javascript to prevent the default action of scrolling to the anchors and instead setting it to scroll to the actual divs themselves. However, I'm still having the same issues.
EDIT: I solved all of the above problems, but now a new problem has arisen. If you scroll through the site, then resize the browser window and scroll back up, you'll notice that a bit of the bottom gets cut off. I looked at the superscrollorama page and it has the same problem. I was hoping that someone knows how to fix this.
Here is the site I am currently working on: http://breathe.simalam.ca/
Here is the javascript for the scrolling:
$(document).ready(function() {
jQuery('.home-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo(0, 1000, {queue:true});
});
jQuery('.showcase-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#showcase_content', 1000, {queue:true});
});
jQuery('.products-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#products_content', 1000, {queue:true});
});
jQuery('.about-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#about_content', 1000, {queue:true});
});
jQuery('.locator-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#locator_content', 1000, {queue:true});
});
jQuery('.contact-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#contact_content', 1000, {queue:true});
}); });
scrollorama code:
$(document).ready(function() {
$('#wrapper').css('display','block');
var controller = $.superscrollorama();
var pinDur = 4000; /* set duration of pin scroll in pixels */
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
pinAnimations
.append([
TweenMax.to($('#showcase'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#products'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#about'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#locator'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#contact'), .5, {css:{top:0}})
], .5)
.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
controller.pin($('#examples-pin'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#examples-pin').css('height','100%');
},
onUnpin: function() {
$('#examples-pin').css('height','2000px');
}
}); });
All of the section divs are inside a parent div. The section divs all have a height, width, and top of 100%.
The parent div containing all of these section divs are as follows:
#examples-pin {
position: relative; /* relative positioning for transitions to work? */
width: 101%; /* max width */
height: 2000px; /* height of 2000px for now */
overflow: hidden; /* hide the overflow for transitions to work */
margin-bottom: -200px; /* negative bottom margin */
}
Source: (StackOverflow)
I have a site with an image of simple vector map, and I'm trying to draw lines on it that show up as the viewer one after another.
I've gotten this far;
http://codepen.io/anon/pen/aEFDw
But I can't figure out how to show the lines one by one.
Btw, I'm also struggling to use superscrollorama.
I'd appreciate any leads!
Source: (StackOverflow)
I'm trying to create an offset to my animations, so they start before th pin frame is at the top, even start the animation as soon the new section enters the viewport.
I already tried to put the offset at the end of the appended animations but that doesn't work...
Any ideas?
var controller = $.superscrollorama({
triggerAtCenter: true
});
// set duration, in pixels scrolled, for pinned element
var pinDur = 6500;
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
pinAnimations
.append([
TweenMax.to($('#logo'), .5, {css:{left:'34%'}}),
TweenMax.to($('#left, #left2'), .5, {css:{top:'-1055px'}}),
TweenMax.to($('#right, #right2'), .5, {css:{top:'-1327px'}})
])
.append([
TweenMax.to($('#flash'), .01, {css:{display: 'none'}})
])
.append([
TweenMax.to($('#flash'), .02, {css:{display: 'block'}}),
TweenMax.to($('#logo, #left, #right'), .01, {css:{display:'none'}}),
TweenMax.to($('#flash, #frame, #stand, #wrapper'), .02, {css:{backgroundColor:'white'}}),
TweenMax.to($('#flash'), .02, {css:{display:'none'}})
])
.append(TweenMax.to($('#this_pin-frame-unpin'), .5, {css:{top:'100px'}}));
// pin element, use onPin and onUnpin to adjust the height of the element
controller.pin($('#wrapper'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#heelwrapper').css('height','100%');
},
onUnpin: function() {
$('#wrapper').stop().animate({height: '900px'}, 10);
}
});
Source: (StackOverflow)
I'm working on a very animated website that extensively uses the pin function of superscrollorama to pause scrolling while still animating certain elements based on scroll position.
The issue is one of stability and optimization. The client, of course, wants the site the be super stable and glitch free, even when grabbing the scroll bar with the mouse and jerking it up and down. Fortunately, this is the only way to get the problems to rear their ugly head, but ugly they are.
When jerking the page up and down with the scroll bar, certain elements are "lost" or "misplaced". I suspect that their positioning is not being reset appropriately. When pinned elements are unpinned, the screen goes white until the next section is pinned. You can see this especially when jerking the page up and down, stopping at the top of the page. Try scrolling down from there. Even some animations are only partially rendered in the scene after the initial office scene. I've tried resetting each affected img and divs position to absolute on unpin to no avail. I've also forced an initial fixed position on each affect img and div and still had issues.
Could it be that the is just too much going on and the browser/computer cannot render it all quick enough, dropping the unexecuted JavaScript and leaving the animation only partially completed?
I am new to the world of web development, especially front end stuff. Any help is really appreciated.
Check it out here - http://www.codeandbacon.com/tv/index.html
EDIT:
I ended up scrapping all of the Superscrollorama code and used Skrollr instead. None of the glitchy stuff happens now + using Skrollr made it easier to make the site responsive. Even works to a certain degree on mobile/tablet.
You can see the new work in progress at http://www.codeandbacon.com/tv2/index.html
Source: (StackOverflow)
I have a series of colored DIVs that I'm trying to fade in and out when you scroll down the page.
My setup for the div's is simple:
<div class="wrapper">
<div id="content" class="clearfix">
<div class="box alpha"></div>
<div class="box beta"></div>
<div class="box gamma last"></div>
<div class="box delta"></div>
<div class="box epsilon"></div>
<div class="box zeta last"></div>
</div>
</div>
Here is my superscrollorama/tweenmax script:
var controller = $.superscrollorama();
controller.addTween('.box.alpha', TweenMax.from( $('.box.alpha'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 400);
controller.addTween('.box.alpha', TweenMax.to( $('.box.alpha'), 1, {css:{opacity: .2}}), 1600);
controller.addTween('.box.beta', TweenMax.from( $('.box.beta'), 1, {css:{opacity: .2}}), 1600);
controller.addTween('.box.beta', TweenMax.to( $('.box.beta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 2400);
controller.addTween('.box.gamma', TweenMax.from( $('.box.gamma'), 1, {css:{opacity: .2}}), 2400);
controller.addTween('.box.gamma', TweenMax.to( $('.box.gamma'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 3200);
controller.addTween('.box.delta', TweenMax.from( $('.box.delta'), 1, {css:{opacity: .2}}), 3200);
controller.addTween('.box.delta', TweenMax.to( $('.box.delta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 4000);
controller.addTween('.box.epsilon', TweenMax.from( $('.box.epsilon'), 1, {css:{opacity: .2}}), 4000);
controller.addTween('.box.epsilon', TweenMax.to( $('.box.epsilon'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 4800);
controller.addTween('.box.zeta', TweenMax.from( $('.box.zeta'), 1, {css:{opacity: .2}}), 4800);
controller.addTween('.box.zeta', TweenMax.to( $('.box.zeta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 5600);
Everything fades in as you scroll down the page, but I want a box to fade out while the next box is fading in, I'm probably doing this wrong but I can't find a whole lot of documentation.
Here's what I'm doing: http://emptywalrus.com/scroll/
Source: (StackOverflow)
I'm using "scrollorama" plugin to achieve a parallax site
I want to pin the parent div of the animated elements for a specific period and then unpin the parent div and animate the next section of code ....
please see this link to understand what i mean
In this site i want to delay the first section from animation while the site logo "Prototype" move up to its fixed position, then the first li child's begin to enter the scene so i want to prevent the li from beginning to move up and the next section entering the scene
I know this action is called "pin" but i don't know how to use it...
<body>
<a class="fixed" rel='nofollow' href="prototype.html"><img src="images/logo.png"/></a>
<ul class="curtains">
<li>
<div class="cont clearfix">
<ul>
<li class="img_1"><img src="images/01.jpg"/></li>
<li class="img_2"><img src="images/02.jpg"/></li>
<li class="img_3"><img src="images/03.jpg"/></li>
<li class="img_4"><img src="images/04.jpg"/></li>
<li class="img_5"><img src="images/05.jpg"/></li>
<li class="img_6"><img src="images/06.jpg"/></li>
</ul>
</div>
</li>
</ul>
$('.curtains > li').css({position: 'fixed',height:'100%'});
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
$( window ).scroll(function(){
if(parseInt($('.fixed').css('top'),"10") > '27'){
$('.fixed').css('top',screen_H*0.5 - $(document).scrollTop()+'px');
}
});
scrollorama.animate('.curtains > li:nth-child(1) .img_1',{
delay:400, duration:150, property:'left', start:-600, end:0
});
scrollorama.animate('.curtains > li:nth-child(1) .img_2',{
delay:400, duration:200, property:'top', start:-600, end:0
});
scrollorama.animate('.curtains > li:nth-child(1) .img_3',{
delay:400, duration:190, property:'right', start:-600, end:0
});
scrollorama.animate('.curtains > li:nth-child(1) .img_4',{
delay:400, duration:140, property:'left', start:-600, end:0
});
scrollorama.animate('.curtains > li:nth-child(1) .img_5',{
delay:400, duration:180, property:'bottom', start:-600, end:0
});
scrollorama.animate('.curtains > li:nth-child(1) .img_6',{
delay:400, duration:120, property:'opacity', start:0, end:1
});
Source: (StackOverflow)
http://honghanhdinh.com/
I am having trouble with the text, "Hong Hanh Dinh" on upon entering the website. I used the superscrollorama jQuery code to help me create this but now there's a hiccup. The text doesn't scroll up smoothly but leaps upwards.
HTML:
<section id="bg" data-speed="10" data-type="background">
<img id="plane" src="http://www.locanto.info/classifieds/images/airplane.png">
<div id="parallax2">
<h2 id="center" class="parallax2">Hong</h2>
<h2 id="left" class="parallax2">Hanh</h2>
<h2 id="right" class="parallax2">Dinh</h2>
</div>
</section>
CSS:
#parallax2 {
height: 800px;
margin-bottom: 600px;
overflow: hidden;
padding-top: 200px;
}
/* Parallax Scrolling text */
#center.parallax2 {
font-size: 175px;
color: #CC3333;
opacity: 0.5;
text-align: center;
left: 200px;
padding: 0;
position: relative;
bottom: 100px;
}
#left.parallax2 {
color: #336699;
font-size: 200px;
text-align: left;
left: 400px;
opacity: 0.75;
overflow: hidden;
position: relative;
}
#right.parallax2 {
color: #C5C3DE;
font-size: 250px;
text-align: right;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 1200px;
bottom: -300px;
}
jQuery:
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween(
'#parallax2',
(new TimelineLite()).append([
TweenMax.fromTo($('#left.parallax2'), 1, {
css: {
top: -400
},
immediateRender: true
}, {
css: {
top: -900
}
}),
TweenMax.fromTo($('#right.parallax2'), 1, {
css: {
top: -750
},
immediateRender: true
}, {
css: {
top: -1800
}
})
]), 1000 // scroll duration of tween
);
});
I cannot seem to figure out which part of these code is causing this hiccup. If you can spot the error, please let me know! I greatly appreciate it! :)
Source: (StackOverflow)
I have setup a few elements with superscrollorama and at the one point when scrolling down one element comes in from the left and another comes from the right and they meet at the middle.
The problem is that before scrolling down the user can actually scroll the page way over to the right, to where the element is actually hiding.
Is there a way to prevent this from happening with superscrollorama?
The code I have for the HTML and Javascript is something like this...
<div class="row">
<div class="col-md-6" id="fly-from-left">This content comes from the left</div>
<div class="col-md-6" id="fly-from-right">This content comes from the right</div>
</div>
<script>
$(document).ready(function() {
var sscr = $.superscrollorama();
sscr.addTween('#fly-from-left', TweenMax.from($('#fly-from-left'), 0.5, { css:{right:'10000px'}, ease:Quad.easeInOut }), 0, -350);
sscr.addTween('#fly-from-right', TweenMax.from($('#fly-from-right'), 0.5, { css:{left:'10000px' }, ease:Quad.easeInOut }), 0, -350);
});
</script>
Source: (StackOverflow)
I am using scrollorama for a scrolling animation project, its great but i am struggling to slow the fly-in animation down so that moves slower than the actual scolling motion.
I am fairly new at jquery I have tried adding 'Duration: 600' which according to the Jquery site is the same as 'slow' and this does not seem to work.
JQUERY CODE:
<script>
$(document).ready(function() {
// This example adds a duration to the tweens so they are synced to the scroll position
var controller = $.superscrollorama();
// amount of scrolling over which the tween takes place (in pixels)
var scrollDuration = 200;
// individual element tweens
controller.addTween('#third-third', TweenMax.from( $('#third-third'), .5, {css:{left:'2200px'}, delay: 200, duration: 600, ease:Quad.easeIn}), scrollDuration);
});
</script>
Basically I need my CSS blocks ('#third-third') to flow in slowly as I scroll.
The help is greatly appreciated.
Source: (StackOverflow)
I am trying to use SuperScrollorama in order to implement a small site with parallax.
I have a few questions but I will start with this: what is the duration attribute in the TweenMax function used for?
controller.addTween(10, TweenMax.to($('#title-line1'), .75 /*** this one ***/, {css:{top: 600}, ease:Quad.easeOut}),200);
I know that the attribute is used to set the duration of the animation (in the TweenMax library), but how is it used in SuperScrollorama?
I couldn't find noticeable differences when the scrollDuration is more than 0.
Thanks!
Source: (StackOverflow)
I am working on a Wordpress theme that has a parallax effect. On closer inspection, this theme is using the scrollorama script. (http://johnpolacek.github.io/scrollorama/)
When I initially downloaded the theme, the effect worked fine but since I have had to heavily customize this theme, the effect no longer works. The images that should move from A to B when scrolling are now just stuck at A and don't move. Clearly something I have done has put a spanner in the works but having never used scrollorama before, I am unsure what to look for.
I have looked at the original themes code specifically at the scrollorama parts and everything matches perfectly so has anyone got any ideas off the bat that could be causing the issue?
Could it simply be a compatibility problem? The only thing I am using other than scrollorama is an added image slider http://www.menucool.com/responsive-slider.aspx
This should be all the code that is being used for scrollorama:
HTML
<div class="scroll-block-wrapper">
<div class="scrollblock">
<div class="space-small-planet"></div>
<div class="space-jupiter"></div>
<div class="space-moon"></div>
<div class="space-spaceship"></div>
<div class="sky-sun"></div>
<div class="sky-plane"></div>
<div class="sky-clouds-1"></div>
<div class="sky-clouds-2"></div>
<div class="sky-clouds-3"></div>
<div class="sky-clouds-4"></div>
<div class="sky-clouds-5"></div>
<div class="sky-clouds-6"></div>
<!--waves and ship-->
<div class="wave-1"></div>
<div class="wave-2"></div>
<div class="wave-3"></div>
<div class="wave-4"></div>
<div class="wave-5"></div>
<div class="wave-6"></div>
<div class="wave-7"></div>
<div class="ship"></div>
<div class="wave-8"></div>
<div class="wave-9"></div>
<div class="wave-10"></div>
<div class="wave-11"></div>
<div class="wave-12"></div>
<div class="wave-13"></div>
<div class="wave-14"></div>
<div class="water-jellyfish"></div>
<div class="water-fishes"></div>
<div class="water-shark"></div>
</div>
</div>
CSS
.scroll-block-wrapper {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
.scrollblock {
position: absolute;
width: 1900px;
left: 50%;
margin-top: -20px;
margin-left: -950px;
}
.space-small-planet {
position: absolute;
top: 600px;
left: 311px;
width: 109px;
height: 108px;
background: url("/img/space-small-planet.png") 0 0 no-repeat;
}
.space-jupiter {
position: absolute;
top: 292px;
left: 67px;
width: 345px;
height: 238px;
background: url("/img/space-jupiter.png") 0 0 no-repeat;
}
.space-moon {
position: absolute;
top: 580px;
right: 39px;
width: 419px;
height: 416px;
background: url("/img/space-moon.png") 0 0 no-repeat;
}
.space-spaceship {
position: absolute;
top: 228px;
right: 238px;
width: 286px;
height: 167px;
background: url("img/space-spaceship.png") 0 0 no-repeat;
}
.sky-plane {
position: absolute;
top: 1510px;
right: -230px;
width: 224px;
height: 98px;
background: url("img/sky-plane.png") 0 0 no-repeat;
}
.sky-clouds-1 {
position: absolute;
top: 838px;
left: 293px;
width: 327px;
height: 106px;
background: url("img/sky-clouds-1.png") 0 0 no-repeat;
}
.sky-clouds-2 {
position: absolute;
top: 970px;
right: 46px;
width: 677px;
height: 171px;
background: url("img/sky-clouds-2.png") 0 0 no-repeat;
}
.sky-clouds-3 {
position: absolute;
top: 1632px;
left: 129px;
width: 605px;
height: 135px;
background: url("img/sky-clouds-3.png") 0 0 no-repeat;
}
.sky-clouds-4 {
position: absolute;
top: 1950px;
left: 60px;
width: 253px;
height: 81px;
background: url("img/sky-clouds-4.png") 0 0 no-repeat;
}
.sky-clouds-5 {
position: absolute;
top: 2220px;
left: 149px;
width: 346px;
height: 253px;
background: url("img/sky-clouds-5.png") 0 0 no-repeat;
}
.sky-clouds-6 {
position: absolute;
top: 2380px;
right: 192px;
width: 215px;
height: 104px;
background: url("img/sky-clouds-6.png") 0 0 no-repeat;
}
.sky-sun {
position: absolute;
top: 1800px;
right: 80px;
width: 876px;
height: 871px;
background: url("img/sky-sun.png") 0 0 no-repeat;
}
.water-jellyfish {
position: absolute;
top: 5090px;
right: 168px;
width: 235px;
height: 257px;
background: url("img/water-jellyfish.png") 0 0 no-repeat;
}
.water-fishes {
position: absolute;
top: 5114px;
left: 33px;
width: 481px;
height: 679px;
background: url("img/water-fishes.png") 0 0 no-repeat;
}
.water-shark {
position: absolute;
top: 5096px;
left: 50%;
margin-left: -309px;
width: 617px;
height: 932px;
background: url("img/water-shark.png") 0 0 no-repeat;
}
/*waves*/
.wave-1 {
position: absolute;
top: 3084px;
left: -200px;
right: -200px;
height: 32px;
background: url("img/waves/wave1.png") 0 0 repeat-x;
}
.wave-2 {
position: absolute;
top: 3101px;
left: -200px;
right: -200px;
height: 39px;
background: url("img/waves/wave2.png") 0 0 repeat-x;
}
.wave-3 {
position: absolute;
top: 3119px;
left: -200px;
right: -200px;
height: 62px;
background: url("img/waves/wave3.png") 0 0 repeat-x;
}
.wave-4 {
position: absolute;
top: 3156px;
left: -200px;
right: -200px;
height: 67px;
background: url("img/waves/wave4.png") 0 0 repeat-x;
}
.wave-5 {
position: absolute;
top: 3199px;
left: -200px;
right: -200px;
height: 82px;
background: url("img/waves/wave5.png") 0 0 repeat-x;
}
.wave-6 {
position: absolute;
top: 3244px;
left: -200px;
right: -200px;
height: 83px;
background: url("img/waves/wave6.png") 0 0 repeat-x;
}
.wave-7 {
position: absolute;
top: 3302px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave7.png") 0 0 repeat-x;
}
.wave-8 {
position: absolute;
top: 3362px;
left: -200px;
right: -200px;
height: 92px;
background: url("img/waves/wave8.png") 0 0 repeat-x;
}
.wave-9 {
position: absolute;
top: 3424px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave9.png") 0 0 repeat-x;
}
.wave-10 {
position: absolute;
top: 3493px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave10.png") 0 0 repeat-x;
}
.wave-11 {
position: absolute;
top: 3562px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave11.png") 0 0 repeat-x;
}
.wave-12 {
position: absolute;
top: 3643px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave12.png") 0 0 repeat-x;
}
.wave-13 {
position: absolute;
top: 3716px;
left: -200px;
right: -200px;
height: 122px;
background: url("img/waves/wave13.png") 0 0 repeat-x;
}
.wave-14 {
position: absolute;
top: 3795px;
left: -200px;
right: -200px;
height: 190px;
background: url("img/waves/wave-last.png") 0 0 repeat-x;
}
.ship {
position: absolute;
top: 3085px;
right: 100px;
width: 317px;
height: 330px;
background: url("img/ship.png") 0 0 no-repeat;
}
Source: (StackOverflow)
Hey i want to add delay of some seconds on each item... like each item animation delays two seconds... Can i do this with superscrollrama and greenshock...
Here is my HTML
<div class="row m0" id="portFolioContainer">
<div class="row m0">
<div class="col-sm-3 col-xs-6 colXS12 pl0 pr0 itemParent">
<div class="item">
<img class="img img-responsive fullWidth" src="images/portfolio/1.jpg" />
</div>
</div>
<div class="col-sm-3 col-xs-6 colXS12 pl0 pr0 itemParent">
<div class="item">
<img class="img img-responsive fullWidth" src="images/portfolio/2.jpg" />
</div>
</div>
<div class="col-sm-3 col-xs-6 colXS12 pl0 pr0 itemParent">
<div class="item">
<img class="img img-responsive fullWidth" src="images/portfolio/3.jpg" />
</div>
</div>
<div class="col-sm-3 col-xs-6 colXS12 pl0 pr0 itemParent">
<div class="item">
<img class="img img-responsive fullWidth" src="images/portfolio/4.jpg" />
</div>
</div>
<div class="col-sm-3 col-xs-6 colXS12 pl0 pr0 itemParent">
<div class="item">
<img class="img img-responsive fullWidth" src="images/portfolio/5.jpg" />
</div>
</div>
<div class="col-sm-3 col-xs-6 colXS12 pl0 pr0 itemParent">
<div class="item">
<img class="img img-responsive fullWidth" src="images/portfolio/6.jpg" />
</div>
</div>
<div class="col-sm-3 col-xs-6 colXS12 pl0 pr0 itemParent">
<div class="item">
<img class="img img-responsive fullWidth" src="images/portfolio/7.jpg" />
</div>
</div>
<div class="col-sm-3 col-xs-6 colXS12 pl0 pr0 itemParent">
<div class="item">
<img class="img img-responsive fullWidth" src="images/portfolio/8.jpg" />
</div>
</div>
</div>
This is my javascript... Is it possible to do by this scipt... because this thing is not working for what i want to do....
$('#portFolioContainer .itemParent').each(function(index,element){
var time = (parseInt(index)*0.2);
controller.addTween('#portFolioContainer',
TweenMax.to($(element).find('.item'), 1, {
delay : time ,
css:{padding:"0%"},
ease:Bounce.easeOut,
startAt :{css:{padding:"20%"}
} })
,0, -150);
});
Source: (StackOverflow)
I tried to learn scrollorama over the weekend, I have tried to learn and use a lot of jquery plugins in the past, never had problems with any. However this one is really confusing me a lot.
I have searched stackoverflow, and other websites about superscrollorama tutorials, however none of them specify the exact way to do it.
I have made a fiddle here for this purpose.
http://jsfiddle.net/4o46jdj7/1/
Here is what I am trying to do. The red div should pin, then the #text-1 should scroll up and fade out, after it fades out, the bottom text should scroll up and once completed, it should unpin and move on to the footer.
Here is the code I am using
var controller = jQuery.superscrollorama({
triggerAtCenter: false,
playoutAnimations: true
});
var pinAnimations = new TimelineLite();
pinAnimations
.append(TweenMax.from(jQuery('#text-1'), .5, {css:{marginTop:'300px'}, ease: Quad.easeInOut}))
.append(TweenMax.to(jQuery('#text-1'), .5, {css:{opacity: 1}}))
.append(TweenMax.to(jQuery('#text-2'), .5, {css:{bottom:'30px'}}));
controller.pin(jQuery('#member'), 600, {
anim:pinAnimations
});
Source: (StackOverflow)
Hi guys I am running into some trouble with the SuperScrollorama plugin and I can't seem to find the answer I am looking for on the web.
I have a banner div set up at the very top of my page. Within this banner is a centered header tag. What i am trying to achieve is that as you start scrolling - the header tag moves up and fades away. When you scroll back up, the animation should move down and fade back in.
The probem I am having is that SuperScrollorama seems to run around content that is scrolled to. My div is already visible when the page opens and so "triggerAtCentre" doesn't apply.
Here's my jQuery:
$(document).ready(function(){
var controller = $.superscrollorama({
triggerAtCenter: false,
playoutAnimations: false
});
var scrollDuration = 200;
controller.addTween('#aniHeader', TweenMax.to( $('#aniHeader'), .2, {css:{
bottom: 200,
opacity: 0
}}), scrollDuration, -200);
});
Now the issue is as following;
When I scroll down , the animation slides up and fades out as it should. But when I scoll back up - the animation never fully restores to it's default position. I understand this is because I have put the offset to -200, and you can't scroll up -200, the minimum would be 0, but I need to fill in the -200 because I need the animation to start playing when the scrolling has just begun.
I hope I have explained my issue correctly and that someone can tell me what's going on here.
Source: (StackOverflow)