Layered pinning with ScrollTrigger and sticky element - javascript

I want to use a scroll trigger for my landing page.
When scrolling down, the next section comes from the bottom. All is ok.
But I want some element, in this example, the deer stay in front of other sections.
Absolute positioning? Sticky? No way... next section is always behind...
My codepen : https://codepen.io/angel-latrio/pen/gOKOXYQ
, deer is on 2nd section.
<div class="description panel blue">
<div><h1>Layered pinning</h1>
<p>Use pinning to layer panels on top of each other as you scroll.</p>
<div class="scroll-down">Scroll down<div class="arrow"></div></div>
</div>
</div>
<section class="panel red">
ONE
</section>
<section class="panel orange">
TWO
<img src="https://icons.iconarchive.com/icons/artdesigner/xmas-deco/256/deer-icon.png" />
</section>
<section class="panel purple">
THREE
</section>
<section class="panel green">
FOUR
</section>
<header>
<a href="https://greensock.com/scrolltrigger">
<img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
</a>
</header>
Thanks !

Related

js parallax effect overlapping images when scrolling

What I would like to do is an animation where there is the sky and mountains of different colors with some text in the middle and when I scroll they come overlapping one at a time (as if they cover each other).
I've tried looking for different tutorials or documentation and I can not do it
what should happen:
The result should be that when scrolling the images of the mountains with the text overlap each other and when you get to the last image the site can be scrolled normally.
i don't have any preference for the js library that will be used
below some codepen links with examples of things i tried to do:
here is the html that i should use with the image links:
<div class="debug">
<label><input type="checkbox"> Debug</label>
</div>
<div class="parallax">
<div id="group" class="parallax__group">
<div class="parallax__layer parallax__layer--base1">
<img src='https://tacweb-test.azurewebsites.net/img/mountain-dark-green.svg'>
</div>
<div class="parallax__layer parallax__layer--base">
<!-- <div class="title">Base Layer</div> --><img src='https://tacweb-test.azurewebsites.net/img/mountain-white.svg'>
</div>
<div class="parallax__layer parallax__layer--back">
<!-- <div class="title">Background Layer</div> -->
<img src='https://tacweb-test.azurewebsites.net/img/mountain-green.svg'>
</div>
<div class="parallax__layer parallax__layer--deep">
<!-- <div class="title">Deep Background Layer</div> -->
<img src='https://tacweb-test.azurewebsites.net/img/clouds.svg' id='clouds'>
</div>
</div>
https://codepen.io/habby1337/pen/xxrZMEa (the one that works a bit better)
https://codepen.io/habby1337/pen/xxrOOqN

Parallax scrolling and alternating text simultaneously

To preface, this might be helpful to see: http://www.sbs.com.au/theboat/
I am trying to replicate a similar effect here: https://codepen.io/summeropratt/pen/ExgXYwa
<div class="first-section"></div>
<div class="card-body">
<section class="cards">
<div class="center cards--inner">
<div class="card" data-rellax-speed="-3">
<h2>info 1</h2>
</div>
<div class="card" data-rellax-speed="0">
<h2>info 2</h2>
</div>
<div class="card" data-rellax-speed="1">
<h2>info 3</h2>
</div>
<div class="card" data-rellax-speed="3">
<h2>info 4</h2>
</div>
</div>
</section>
</div>
<div class="last-section"></div>
Here is what I am struggling with:
I would ideally like the text to fade in and out. First you see "info 1" fade into view then fade out before seeing "info 2" fade in/out, etc.
In the current snippet, the parallax scrolling starts as soon as your mouse hovers the element. This is an issue when your mouse is towards the bottom of your screen and the entire ".card-body" is not in view. It cuts off the content. I understand why, but how can I get around this? I want the entire view to be the blue background and nothing else.

Slick Carousel Permanently Off Screen

I'm attempting to create a slick carousel using the slick library http://kenwheeler.github.io/slick/
Slick is loading and it's applying classes, containers, buttons etc. properly but the slides are permanently off screen. The translate3d x value on the active slide is always set to be outside the window. When clicking the 'previous' button or dragging the slide I'm able to pull it into the screen but as soon as it reaches the 0,0,0 position it returns to being outside the screen immediately. Here is my attempt to get it to work
<div class="slick-slider homepage-slider">
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">
<p>Slide Summary</p>
</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">Slide summary</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide title</h2>
<div class="slide-caption">
<p>Slide summary</p>
</div>
</div>
</div>
</a>
</div>
</div>
In my js file I'm using
jQuery(document).ready(function() {
jQuery('.homepage-slider').slick({
rtl: true
});
});
http://jsfiddle.net/q1qznouw/549/
note: dragging works on my webpage but not within the jsfiddle sandbox
I receive no javascript errors. Is there a reason why the slides are permanently at a translate3d position outside the browser window, and when dragging onto the screen returns outside the browser window when letting go?
The issue is with your rtl setting. This requires a bit of extra markup to work (from Slick docs):
Note: the HTML tag or the parent of the slider must have the attribute
"dir" set to "rtl".
If you change your slick parent div from this:
<div class="slick-slider homepage-slider">
To this:
<div class="slick-slider homepage-slider" dir="rtl">
That should sort it

Getting webpage content using Bootstrap 3 positioned above animated background correctly

The overview: I'm using Bootstrap 3 as my CSS Framework, thus the content is organized using its container/grid system. The background animation consists of blue/green diagonal strips that basically zig zag with each other. The animated background sequence is using two images that are repeated vertically. Currently the animation background images are in their own container/divs. Essentially I'm trying to fit a number of containers with the content above the background container.
My goal is to have the animated background responsive to device size but also able to have content anchored to specific places on the page background/animation. Eventually I would like to have additional events triggered according to the mouse's y-axis position.
Originally I thought I could have the background in its own container then have the containers/div's that contained the content set to a higher z-index so it would be positioned above the background animation. As you can see from looking at the jsfiddle I can't get the contents containers to be positioned above the background animation. It gets pushed to the bottom of the page.
I'm wondering if I need to make the background in its own non bootstrap div while only the contents use bootstrap? I could use width: 100% and height: 100% but then I I'm not sure if I would be able to anchor/fix certain content to specific points in the page.
I'm open to any and all suggestions. Simply put I want to have the contents position correctly over the animated background while also allowing the page to be responsive to device size.
<body>
<div class="container">
<div class="bluestrip">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
</div>
<div class='container zindex'>
<div class="row">
<div class='col-md-2'>
<img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
</div>
</div>
</body>
http://jsfiddle.net/bismarck611/jt2k4o6z/
I was able to solve the problem with a few code changes. Never figured out if it was possible to have two containers stacked over each other with different z-index's.
<body>
<div class="background-content">
<div class="bluestrip">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
</div>
<div class='container zindex'>
<div class="row">
<div class='col-md-2'>
<img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
</div>
</div>
</body>
The div that is holding the img's I changed the css class to the following:
.background-content {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
}
This allowed for the images to resize themselves according to screen size and fit below the page contents. Now I'm still able to use the bootstrap framework over my css animated background.

Zurb Foundation 4 Section collapsing

Trying to implement a section with Zurb Foundation 4.3.2. I've made sure to include the right couple of js and css files, and initialize foundation in the js script, but the section continues to collapse all the content and buttons together. The first section/tab doesn't show up either.
EDIT: Here's a JS Fiddle: http://jsfiddle.net/ethanova/R2SdH/ (my first, so if I performed some kind of worst practice, let me know)
After making the JSFiddle, I realized that it's working correctly on smaller dpi screens (it looks alright in the small area JSFiddle provides, even if clicking the tabs isn't working - I checked with my actual code and making the browser window smaller switches the section to Accordion and it works great). So it seems that it's only on the larger screen sizes when it reverts to Tabs is when the section collapses and doesn't work.
Any ideas on what's going wrong? Thanks guys.
<!-- foundation zurb -->
<link rel="stylesheet" href="./css/foundation.min.css">
<link rel="stylesheet" href="./css/normalize.css">
<!-- JAVASCRIPT -->
<script src='../../js/vendor/jquery.js'></script>
<!-- zurb foundation -->
<script src="../../js/foundation.min.js"></script>
<script src="../../js/vendor/custom.modernizr.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<div class='row'>
<div class='small-12 columns'>
123 Street Name <br /> City, ST Zip <br />
</div>
</div>
<div class='row'>
<div class='large-8 columns'>
<div class="section-container auto" data-section data-section-resized>
<section class="active">
<p class="title" data-section-title>Details</p>
<div class="content" data-section-content>
<p>Things like Comments, Area, Use Type, Current Use, Sqft, Taxes, Value, Status</p>
</div>
</section>
<section>
<p class="title" data-section-title>Improvements</p>
<div class="content" data-section-content>
<p>Any improvements data</p>
</div>
</section>
<section>
<p class="title" data-section-title>Mortgage</p>
<div class="content" data-section-content>
<p>Mortage data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lease</p>
<div class="content" data-section-content>
<p>Lease data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lien</p>
<div class="content" data-section-content>
<p>Lien data.</p>
</div>
</section>
</div>
</div>
<div class='large-4 columns'>
Map Goes Here
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
Related people
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
Related properties
</div>
</div>
After some more testing I figured it out. I downloaded the source code from their Section page and started inserting my code trying to get it to work. The reason I got here in the first place was because my section disappeared at one point and another stackoverflow answer said just add "data-section-resized" to the section container div. Well, don't. That got it back to being invisible. I had removed some js from my header to try to closer match theirs, and it was a mistake. This is what my section and header looks like now:
Header:
<!-- foundation zurb -->
<link rel="stylesheet" href="../../css/foundation.min.css">
<link rel="stylesheet" href="../../css/normalize.css">
<link rel="stylesheet" href="../../css/general_foundicons.css">
<!-- zurb foundation -->
<script src="../../js/foundation/foundation.js"></script>
<script src="../../js/foundation/foundation.section.js"></script>
<script src="../../js/vendor/custom.modernizr.js"></script>
Supposedly, foundation.min.js includes all the others like section. I can confirm if you try to replace foundation.js and foundation.section.js with foundation.min.js it will not work. If you keep section.js and change to foundation.js to foundation.min.js it will not work. You have to have foundation.js and foundation.section.js.
Section:
<div class='row'>
<div class='large-8 columns'>
<div class="section-container auto" data-section>
<section class="active">
<p class="title" data-section-title>Details</p>
<div class="content" data-section-content>
<p>Things like Comments, Area, Use Type, Current Use, Sqft, Taxes, Value, Status</p>
</div>
</section>
<section>
<p class="title" data-section-title>Improvements</p>
<div class="content" data-section-content>
<p>Any improvements data</p>
</div>
</section>
<section>
<p class="title" data-section-title>Mortgage</p>
<div class="content" data-section-content>
<p>Mortage data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lease</p>
<div class="content" data-section-content>
<p>Lease data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lien</p>
<div class="content" data-section-content>
<p>Lien data.</p>
</div>
</section>
</div>
</div>
<div class='large-4 columns'>
Map Goes Here
</div>
</div>

Categories