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.
Related
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 !
I have a HTML grid and 4 divs in. On one hand I want to apply a single background image on these one. On the other hand, I want to translate the divs on scroll.
It works but when I scroll, the background image is not extended anymore.
<html>
<body>
<section id="home">
<div id="bloc1" class="bloc"> </div>
<div id="bloc2" class="bloc"> </div>
<div id="bloc3" class="bloc"> </div>
<div id="bloc4" class="bloc"> </div>
</section>
</body>
</html>
JS & CSS on JSFiddle : https://jsfiddle.net/SO3HSBF5/84wmv1cn/4/
Anyone can help me ?
Hi guys so i have a simple effect when a person scrolls down content will fly in from the left and right etc. However what i want to happen is that when the user scrolls back up, the content stays the same, so the effect only happens one time per refresh if that make sense :)
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6" data-aos="fade-right" data-aos-easing="ease-in-sine">
<h1> 1</h1>
<span class="border"></span>
<p> 2 </p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6" data-aos="fade-left" data-aos-easing="ease-in-sine">
<img src="Images/number1.png" style="padding-top: 20px;">
</div>
</div>
JS:
AOS.init({
duration: 1200,
})
I have used this plugin Link For the effects
Thanks
Looks like there is a attribute you can add to your element
data-aos-once="true"
that can be added to keep the item from animating a second time.
https://github.com/michalsnik/aos#-advanced-settings
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
iview slider automatically decreases the .iview-caption div height after every slide and thats why my content cut last line. Please anybody Solve this problem.
Here is Code:-
<div id="iview">
<div data-iview:thumbnail="slider/img/photo1.jpg" data-iview:image="slider/img/photo2.jpg">
<div class="iview-caption" data-x="130" data-y="50" data-transition="expandRight">
Can’t decide if you hate your job or your boss more?
</div>
<div class="iview-caption caption1" data-x="0" data-y="40" data-transition="fade" data-speed="2000">
<span>Thinking of changing jobs? <strong>Register here</strong> for exciting new job opportunities with Staffing.</span></div>
</div>
<div data-iview:thumbnail="slider/img/photo2.jpg" data-iview:image="slider/img/photo1.jpg">
<div class="iview-caption" data-x="130" data-y="50" data-transition="expandRight" >
Research shows that 78% of resumes are misleading.
</div>
<div class="iview-caption caption1" data-x="0" data-y="40" data-transition="fade" data-speed="2000">
<span>Want to find the other 22%? We’ve already done that for you.</span>
</div>
</div>
</div>
</div>