Jquery : animate image on scroll - javascript

I want to animate an image in specific part of page when page is scrolled to that area. Animation should be like this: when page loads that image is invisible and as we scroll down that image fadesIn and moves from right to left 100px .
this is what i did to get scroll position
jQuery(document).ready(function($){
$('.myimages').hide();
var target = $(".img-div").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >=target)
{
$('.myimages').fadeIn();
}
}, 250);
});
now instead of image fading in what i need to animate it as per above mentioned criteria i tried something like this
$('.myimages').animate({right:'100'}, 200);
but this did not work please help me with it

Instead of firing a setInterval every few seconds, you can bind it to the window's scroll event.
$(window).scroll(function () {
if ($(window).scrollTop() >= target)
$('.myimages').fadeIn();
});
To animate the right and other similar CSS properties, you need to set the .image's position to be something else than static.
$('.myimages').animate({
right: 100
}, 200);
So, you need this in CSS:
.myimages {position: absolute;}
Working Snippet
$(function () {
$("img").hide();
$(window).scroll(function () {
if ($(window).scrollTop() > $("img").scrollTop())
$("img").show().addClass("bounceInRight");
});
});
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
img {max-width: 100%;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<h1>Animation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, unde amet a repellat tempora ipsum! Maiores minima sapiente blanditiis, asperiores necessitatibus corporis incidunt! Ex, praesentium aliquam omnis dicta quo. Quisquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eius eligendi praesentium doloremque voluptatibus, vero sed aspernatur officia eum repellat unde dolore ut eaque esse, officiis natus harum vel eos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta atque beatae temporibus et officiis enim, rem facere! Voluptatibus adipisci, odit in necessitatibus explicabo eveniet culpa. Nisi praesentium quasi error ducimus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus autem facere ipsa ratione excepturi praesentium. Reiciendis aut praesentium earum laboriosam, architecto quasi error, corporis, nesciunt maxime distinctio quo nisi debitis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati eos, consequatur voluptatibus harum deserunt! Fugit voluptatem veniam atque, odio aut qui iste laudantium, nemo error vero natus eaque unde sunt!</p>
<p><img src="https://assets.keycdn.com/img/cdn-network.svg" alt="" class="animated" /></p>

Related

Question: Intersection Observer - Animation

I spent the weekend trying to get my head around the Intersection Observer Animation for an animation that I'm trying to achieve. From my understanding of the intersection observer my code should work as I intended but the reality is it doesn't 🥲
My goal is that the scroll animation starts when the element reaches a certain point within the viewport. In my codepen, I've marked the point where the animation should start with a border. However, the animation starts as soon as the div enters the viewport.
Also, when the element gets below the border again, the animation should stop.
I would very much appreciate any help to achieve my goal.
Code example: https://codepen.io/aki-sol/pen/RwJPJrW?editors=1111
Also, if you have any feedback on my animation approach I'm very happy to receive criticism/ better way of approaching this.
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
</div>
<div class="box">
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
</div>
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
</div>
body {
position: relatvie;
heig;
}
body:after {
content: '';
position: fixed;
bottom: 40%;
height: 1px;
width: 100%;
border-bottom: 1px solid blue;
}
.text {
background-color: brown;
color: white;
height: 150vh;
}
.box {
display: flex;
position: relative;
}
.box-content {
width: 200px;
height: 200px;
background-color: greenyellow;
margin-right: 50px;
}
const boxElement = document.querySelector(".box");
//this function calls the aniamtion function and observes the window scroll position
function getWindowScrollPos() {
let windowPosition = window.scrollY;
window.addEventListener("scroll", () => {
windowPosition = window.scrollY;
animateBox(boxElement, windowPosition);
});
}
function animateBox(box, scrollPosition) {
let boxOffsetPosition = scrollPosition;
box.style.left = `${-boxOffsetPosition}px `;
}
function boxObserver(element) {
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
getWindowScrollPos();
}
});
},
{ rootMargin: "0% 0% 60% 0%" }
);
observer.observe(element);
}
boxObserver(boxElement);
Thanks a lot!
There are two things to note here, I guess.
First, the Intersection Observer (along with Resize Observer) is not the best thing to test in online sandboxes, because they run code in an iframe, which leads to such a behavior. You should try to run your code in a browser.
There are questions related to this problem. E.g.: In codepen, Intersection observer has different behavior from browser window
Second, you're probably misunderstanding rootMargin. You set it to 0% 0% 60% 0% which means “add 60% of the height of the root to the very root, and use it as a bottom border for intersection”.
What you actually want to is to decrease the bottom border, not to increase. So, just set it to 0% 0% -40% 0% and it will work.
The Intersection Observer tutorial that helped me a bit to understand the rootMargin weirdness. Maybe it will be useful for you too.
Demo
Here's your snippet that I changed a bit to make it work inside an iframe. I've added a container node and use it instead of window.
const boxElement = document.querySelector('.box');
const container = document.getElementById('container');
function setupListener() {
let scrollPosition = container.scrollTop;
animateBox(boxElement, scrollPosition);
container.addEventListener('scroll', () => {
scrollPosition = container.scrollTop;
animateBox(boxElement, scrollPosition);
});
}
function animateBox(box, scrollPosition) {
let boxOffsetPosition = scrollPosition;
box.style.left = `${-boxOffsetPosition}px`;
}
function boxObserver(element) {
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setupListener();
}
});
},
{
root: document.getElementById('container'),
rootMargin: `0px 0px -40% 0px`
}
);
observer.observe(element);
}
boxObserver(boxElement);
body {
margin: 0;
overflow: hidden;
}
body:after {
content: "";
position: fixed;
bottom: 40%;
height: 1px;
width: 100%;
border-bottom: 1px solid blue;
}
.container {
overflow: scroll;
max-height: 100vh;
}
.text {
background-color: brown;
color: white;
height: 150vh;
}
.box {
display: flex;
position: relative;
}
.box-content {
width: 200px;
height: 200px;
background-color: greenyellow;
margin-right: 50px;
}
<div class="container" id="container">
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
</div>
<div class="box">
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
</div>
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
</div>
</div>
What may be improved
Also, if you have any feedback on my animation approach I'm very happy to receive criticism/ better way of approaching this.
Well, you surely should think about the scroll listener you will have after the intersection started. If you don't remove it, it will hang. Or even worse, they will be increasing during each intersection. Not a good thing.
Also it's better to animate transform, not left. It's good for optimization. Otherwise you'll get junky animation which will freeze the whole site. Check this set of articles by Google: web.dev/animations/.

How To Implement Custom Scroll Buttons In Bootstrap Modal Body

I want to implement a custom scroll up & down button outside the Bootstrap 4 modal but I have no idea how to achieve this functionality. I has hidden the scroll bar using (::-webkit-scrollbar {display:none;}) property to enhance the modal body design.
On PC we can scroll using the mouse but some people may get confused so that's why I want to add two custom up & down buttons. (Check out the image I attached)
Is it possible to achieve the functionality using javascript?
[![My project website with buttons
.modal-body::-webkit-scrollbar {
display: none;
}
.modal-body P {
color: red;
}
.modal.left_modal .modal-dialog {
position: fixed;
margin: auto;
width: 450px;
max-width: 85%;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left_modal .modal-content {
height: 100vh !important;
}
.modal.left_modal.fade .modal-dialog{
left: -50%;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left_modal.fade.show .modal-dialog{
left: 0;
box-shadow: 0px 0px 19px rgba(0,0,0,.5);
}
.modal_outer .modal-body {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<button class="btn btn-primary mt-3 float-right" id="modal_view_left" data-toggle="modal" data-target="#get_quote_modal">Open modal</button>
<div class="modal modal_outer left_modal fade" id="get_quote_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">LEFT MODAL</h2>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-primary ml-auto" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
</div>
]1]1
Absolutely possible. In the snippet you will find the basic setup needed to achieve this.
Though I did not implement scrolling more on each click or styles of any kind, you will have to add that yourself. Read the scrolltop value of your modal content and add your desired number, this has to happen in every click to set the correct new scroll value.
javascript scroll documentation
.modal-body::-webkit-scrollbar {
display: none;
}
.modal-body P {
color: red;
}
.modal.left_modal .modal-dialog {
position: fixed;
margin: auto;
width: 450px;
max-width: 85%;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left_modal .modal-content {
height: 100vh !important;
}
.modal.left_modal.fade .modal-dialog{
left: -50%;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left_modal.fade.show .modal-dialog{
left: 0;
box-shadow: 0px 0px 19px rgba(0,0,0,.5);
}
.modal_outer .modal-body {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<button class="btn btn-primary mt-3 float-right" id="modal_view_left" data-toggle="modal" data-target="#get_quote_modal">Open modal</button>
<div class="modal modal_outer left_modal fade" id="get_quote_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" >
<button id="scrollDown">v</button>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">LEFT MODAL</h2>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-primary ml-auto" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
</div>
<script>
let btn = document.getElementById('scrollDown');
let elem = document.getElementsByClassName('modal-body'); // returns array
btn.onclick = function(e) {
elem[0].scroll(0, 1000); // scrolls inside modal body
};
</script>
Relevant script:
let btn = document.getElementById('scrollDown');
let elem = document.getElementsByClassName('modal-body'); // returns array - you can use ID instead
btn.onclick = function(e) {
// if you set an id on the modal body, you do not need elem[0], just elem
elem[0].scroll(0, 1000); // scrolls inside modal body
};

Fading top and bottom edges of a semi transparent and scrollable div with a background video

So I have a div that contains a fixed height and inside it there is another one with overflow: auto that lets the div be scrollable. The parent div is semi-transparent and in the background of everything there is a video being played.
HTML:
<div class="parent">
<div class="fade-top"/>
<div class="fade-bottom"/>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
</div>
</div>
CSS:
.parent{
height: 2rem;
position: relative
background: hsla(180, 2%, 8%, 0.76);
}
.fade-top {
poistion: absolute;
top: 0;
background: linear-gradient(0deg, hsla(180, 2%, 8%, 0.76) 20%, transparent 100%);
height: 50px;
transition: opacity 0.3s;
}
.fade-bottom {
position: absolute;
bottom: 0;
background: linear-gradient(180deg, $content-bg-elementum 20%, transparent 100%);
height: 50px;
transition: opacity 0.3s;
}
.text {
overflow: auto;
}
Question:
How do I make the top and bottom divs fade gradually to mix with the parent semi-transparent color?
Current state, the red board has to be mixed with the parent background and not cut by the height of the parent:
You can use After and before for fade top and bottom instead of using extra divs.
The code will be like.
HTML
<div class="parent">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
</div>
</div>
CSS
.parent{
position: relative;
width: 600px;
background: hsla(180, 2%, 8%, 0.76);
color: white;
}
.parent:before{
content: "";
width:100%;
height:40px;
background: linear-gradient(black, transparent);
position:absolute;
top: 0;
}
.parent::after{
content: "";
width:100%;
height:40px;
background: linear-gradient(transparent, black);
position:absolute;
bottom: 0;
}
.text {
overflow-y: auto;
height: 200px;
}
https://codepen.io/suffiyan1/pen/vYeyjZo
So I finally found a way around this using the CSS property mask. Like this:
HTML:
<div class="parent fade-top-bottom">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
</div>
</div>
CSS:
.parent{
height: 2rem;
position: relative
background: hsla(180, 2%, 8%, 0.76);
}
.fade-top-bottom {
mask:
linear-gradient(to top, transparent 10%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 10%, black 80%, transparent 100%);
}
.text {
overflow: auto;
}

Animated CSS not strolling with page

I am new on css, html and javascript. Trying to create a website but stuck on animation.
#import url('https://fonts.googleapis.com/css?family=Montserrat:700');
body{
background-color: rosybrown;
}
header{
background-color: black;
height: 20%;
color: #fff;
text-align: center;
}
#fly-in {
height: 50px;
font-size: 4em;
margin: 40vh auto;
height: 20vh;
text-transform: uppercase;
}
#fly-in span {
display: block;
font-size: .4em;
opacity: .8;
}
#fly-in div {
position: fixed;
background-position: 50%;
margin: 2vh 0;
opacity: 0;
left: 10vw;
width: 80vw;
animation: switch 32s linear infinite;
}
#fly-in div:nth-child(2) { animation-delay: 4s}
#fly-in div:nth-child(3) { animation-delay: 8s}
#fly-in div:nth-child(4) { animation-delay: 12s}
#fly-in div:nth-child(5) { animation-delay: 16s}
#fly-in div:nth-child(6) { animation-delay: 20s}
#fly-in div:nth-child(7) { animation-delay: 24s}
#fly-in div:nth-child(8) { animation-delay: 28s}
#keyframes switch {
0% { opacity: 0;filter: blur(20px); transform:scale(12)}
3% { opacity: 1;filter: blur(0); transform:scale(1)}
10% { opacity: 1;filter: blur(0); transform:scale(.9)}
13% { opacity: 0;filter: blur(10px); transform:scale(.1)}
80% { opacity: 0}
100% { opacity: 0}
}
<header>
<div id="fly-in">
<div><span>Very</span>Cinematic</div>
<div>Fade Away<span>into the distance</span></div>
<div>Still Loops <span> for eternity</span></div>
<div><span>Just CSS</span> and HTML</div>
<div><span>Very</span>Cinematic</div>
<div>Fade Away<span>into the distance</span></div>
<div>Still Loops <span> for eternity</span></div>
<div><span>Just CSS</span> and HTML</div>
</div>
</header>
<div>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
<H1>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Ab sit debitis error deleniti,
molestias consectetur nostrum cupiditate possimus
neque nemo adipisci aut a minima iste ipsam deserunt
incidunt iure aliquid?</H1>
</div>
animation works well but what i want is when i stroll down animation should follow the page and go up. but thats not happen. I have changed position to relative, sticky and fixed but no luck.
codepin: https://codepen.io/younusrahman/pen/QWvpKXE
Changing the values of position won't fix the issue. I tried giving position: relative, now the text is getting moved up on scroll, but each texts are coming after another. If you have only one text, this would work.
Set div position to absolute inside "fly-in" div instead of fixed
#fly-in div
{
position: absolute;
}

CSS Change Background Color at Certain Point

I would like the background of the entire site to change from white to black when a certain element comes into view. So when you scroll by the element the background transitions to black. When you scroll back up I want the background color of the page to change back to white. Thank you!
HTML:
<div id="#block-yui_3_17_2_2_1495044195108_28541" class="colorChange">
<script>
$(window).scroll(function () {
$('#block-yui_3_17_2_2_1495044195108_28541').each(function () {
var topOfWindow = $(window).scrollTop(),
bottomOfWindow = topOfWindow + $(window).height();
var imagePos = $(this).offset().top;
if(imagePos <= bottomOfWindow-100 && imagePos >= topOfWindow-250){
$(this).addClass('colorChange');
}else{
$(this).removeClass('colorChange');
}
});
});
</script>
CSS:
.colorChange{
#siteWrapper {
-webkit-animation-name: colorChange;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
animation-name: colorChange;
animation-duration: 1s;
animation-timing-function: ease-in;
}}
#-webkit-keyframes colorChange {
0% {
background-color:black;
}
100.0% {
background-color:black;
}
}
#keyframes colorChange {
0% {
background-color:black;
}
100.0% {
background-color:black;
}
}
Using the scroll event you can calculate the offset of the h1 (or whatever element) which gets the current coordinates of the element. the wScroll variable gets the current vertical position of the scroll bar in this case the top of the window. On the condition you check if the scrollbar is greater or equal to the element you which to target and subtract that from the window height (if you wish to change the background once the element is on the screen change the 1.2 to 1) add a transition to the body for the animation. Check the demo scroll down.
Sorry if its not well explained, excuse my writing.
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if(wScroll >= $('h1').offset().top - ($(window).height() / 1.2 ) ){
$("body").css("background-color", "black");
}else{
$("body").css("background-color", "white");
}
});
body{
transition: background-color 0.3s ease-in-out;
}
p{height: 1000px;}
h1{
height: 400px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hei">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. </p>
<h1>Change to Black</h1>
</div>
Your $(window).scroll is correct but i think your code lacks the proper setup to do what you want. Here is a working sample i made from your code to change the color of the background when the block div comes into view when scrolling.
https://codepen.io/Nasir_T/pen/jmvwEP
Hope this helps.
If you only want something to happen when the element is in the viewport, you can find the top/bottom positions of the element and compare it to the scrolled distance and bottom of the window.
$(window).on('resize scroll',function() {
var $div = $('div'),
$body = $('body'),
st = $(this).scrollTop(),
wh = $(this).height(),
wb = st + wh,
dh = $div.height(),
dt = $div.offset().top,
db = dh + dt;
if (dt < wb && db > st) {
$body.addClass('color');
} else {
$body.removeClass('color');
}
})
section {
height: 150vh;
}
div {
background: black;
height: 200px;
}
.color {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section></section>
<div></div>
<section></section>
I assume your real issue are the first to lines in your CSS which is not valid. Have a look at the reference. If you want to select all .colorChange inside of #pageWrapper use:
#siteWrapper .colorChange {}
Also remove the "#" in your HTML like so:
<div id="block-yui_3_17_2_2_1495044195108_28541" class="colorChange">
I also would recommend you two throttle your events, so that you do not listen to every scroll event, which could dramatically slow down your system, but every 50 seconds or so. Have a look at ScrollSpy or some jquery throtte plugin.

Categories

Resources