Mixing
How can I trigger orl event
How can I trigger or execute a class animation with scroll eventHow can I triggerHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll event
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}
JS:
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= 599){
var element = document.getElementById("myDIV");
element.classList.remove("close");
element.classList.add("open");
element.classList.remove("static");
console.log('OPEN!');
}
else if(st <= 600 && st < 600){
var element = document.getElementById("myDIV");
element.classList.remove("open");
element.classList.add("close");
element.classList.remove("static");
console.log('CLOSE!');
}
else {
}
});
});
jquery scroll
asked Dec 31 '18 at 2:38
TzuTzu
116
add a comment |
How can I trigger or execute a class animation with scroll eventHow can I triggerHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll event
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}
JS:
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= 599){
var element = document.getElementById("myDIV");
element.classList.remove("close");
element.classList.add("open");
element.classList.remove("static");
console.log('OPEN!');
}
else if(st <= 600 && st < 600){
var element = document.getElementById("myDIV");
element.classList.remove("open");
element.classList.add("close");
element.classList.remove("static");
console.log('CLOSE!');
}
else {
}
});
});
jquery scroll
asked Dec 31 '18 at 2:38
TzuTzu
116
You want to change the behavior depending on whether a user is scrolling up or down? So say if I scroll towards the bottom and reach599px, thenelement.classList.add("animateOpenScroll");is invoked (like you're showing). But if the scroll is below599pxand I scroll towards the top, you wantelement.classList.add("animateColseScroll");to get invoiked? Is that the question?
– seebiscuit
Dec 31 '18 at 2:46
Hi seebiscuit!, yes, but in both ways, just update the post so you can see.
– Tzu
Jan 2 at 2:10
add a comment |
How can I trigger or execute a class animation with scroll eventHow can I triggerHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll event
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}
JS:
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= 599){
var element = document.getElementById("myDIV");
element.classList.remove("close");
element.classList.add("open");
element.classList.remove("static");
console.log('OPEN!');
}
else if(st <= 600 && st < 600){
var element = document.getElementById("myDIV");
element.classList.remove("open");
element.classList.add("close");
element.classList.remove("static");
console.log('CLOSE!');
}
else {
}
});
});
jquery scroll
asked Dec 31 '18 at 2:38
TzuTzu
116
How can I trigger or execute a class animation with scroll eventHow can I triggerHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll eventHow can I trigger or execute a class animation with scroll event
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}
JS:
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= 599){
var element = document.getElementById("myDIV");
element.classList.remove("close");
element.classList.add("open");
element.classList.remove("static");
console.log('OPEN!');
}
else if(st <= 600 && st < 600){
var element = document.getElementById("myDIV");
element.classList.remove("open");
element.classList.add("close");
element.classList.remove("static");
console.log('CLOSE!');
}
else {
}
});
});
jquery scroll
jquery scroll
asked Dec 31 '18 at 2:38
TzuTzu
116
asked Dec 31 '18 at 2:38
TzuTzu
116
edited Mar 14 at 15:00
Tzu
asked Dec 31 '18 at 2:38
TzuTzu
116
asked Dec 31 '18 at 2:38
TzuTzu
116
asked Dec 31 '18 at 2:38
TzuTzu
116
116
You want to change the behavior depending on whether a user is scrolling up or down? So say if I scroll towards the bottom and reach599px, thenelement.classList.add("animateOpenScroll");is invoked (like you're showing). But if the scroll is below599pxand I scroll towards the top, you wantelement.classList.add("animateColseScroll");to get invoiked? Is that the question?
– seebiscuit
Dec 31 '18 at 2:46
Hi seebiscuit!, yes, but in both ways, just update the post so you can see.
– Tzu
Jan 2 at 2:10
add a comment |
You want to change the behavior depending on whether a user is scrolling up or down? So say if I scroll towards the bottom and reach599px, thenelement.classList.add("animateOpenScroll");is invoked (like you're showing). But if the scroll is below599pxand I scroll towards the top, you wantelement.classList.add("animateColseScroll");to get invoiked? Is that the question?
– seebiscuit
Dec 31 '18 at 2:46
Hi seebiscuit!, yes, but in both ways, just update the post so you can see.
– Tzu
Jan 2 at 2:10
You want to change the behavior depending on whether a user is scrolling up or down? So say if I scroll towards the bottom and reach
599px, then element.classList.add("animateOpenScroll"); is invoked (like you're showing). But if the scroll is below 599px and I scroll towards the top, you want element.classList.add("animateColseScroll"); to get invoiked? Is that the question?– seebiscuit
Dec 31 '18 at 2:46
You want to change the behavior depending on whether a user is scrolling up or down? So say if I scroll towards the bottom and reach
599px, then element.classList.add("animateOpenScroll"); is invoked (like you're showing). But if the scroll is below 599px and I scroll towards the top, you want element.classList.add("animateColseScroll"); to get invoiked? Is that the question?– seebiscuit
Dec 31 '18 at 2:46
Hi seebiscuit!, yes, but in both ways, just update the post so you can see.
– Tzu
Jan 2 at 2:10
Hi seebiscuit!, yes, but in both ways, just update the post so you can see.
– Tzu
Jan 2 at 2:10
add a comment |
1 Answer
1
active
oldest
votes
Here's a very lazy answer on the last day of 2018...Happy New Year ;)
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= 599 && st < 799){
var element = document.getElementById("myDIV");
element.classList.add("animateOpenScroll");
}
else if(st >= 799){
//do whatever you need to do if scroll top reaches (or surpasses) 799
}
else {
//you'll need this. Fall back to the initial state...when scroll top is less than 599
}
});
});
More Details
The main problem is that your div has 2 states, not 3. It is either open or close and then your if...else block doesn't reflect this...in fact, it's a bit over the place...for example this...
else if(st <= 600 && st < 600){}
doesn't make much sense, not to mention the empty else block which is essentially the same as the else if block in this context. You need to tidy up your code first to make it easier to understand...
Tidying Up
The .static, .open and .close css classes are basically the same, the only difference is that the last 2 add an animation. You can easily remove those declarations. Here's your new .open, .close classess...
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
now in your jQuery code you don't need to add/remove the .static css class. Also, you need to get keep track of the state of your div to know when to play the .close animation and when not to.
See all the changes below...
var open = false;
$(function(){
var element = document.getElementById("myDIV");
var scrollMarker = 599;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= scrollMarker){
open = true;
element.classList.remove("close");
element.classList.add("open");
}
//plays the close animation only if the "state" of the div is open
else if(open) {
open = false;
element.classList.remove("open");
element.classList.add("close");
}
});
});body {
background-color: black;
margin: 0;
padding: 0;
height: 2500px;
}
.static{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10965px / 15);
height: 499px;
background: url(https://www.nvidia.com/content/dam/en-zz/Solutions/titan/titan-rtx/titan-rtx-exploded-view-v022-seq1-15f-ld.jpg);
}
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes open
{
from
{
background-position: 0;
}
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV" class="static"></div>You might have to click on "Full Page" if you want to see the animation or...change the value of scrollMarker
answered Dec 31 '18 at 2:46
LeoLeo
11.4k22546
Hi Leo!, Happy new year!, thank you so much for the answer, I'm using your suggestion, but now I have a new issue, I just update the post so you can see it better.
– Tzu
Jan 2 at 2:07
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53983078%2fhow-can-i-trigger-orl-event%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here's a very lazy answer on the last day of 2018...Happy New Year ;)
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= 599 && st < 799){
var element = document.getElementById("myDIV");
element.classList.add("animateOpenScroll");
}
else if(st >= 799){
//do whatever you need to do if scroll top reaches (or surpasses) 799
}
else {
//you'll need this. Fall back to the initial state...when scroll top is less than 599
}
});
});
More Details
The main problem is that your div has 2 states, not 3. It is either open or close and then your if...else block doesn't reflect this...in fact, it's a bit over the place...for example this...
else if(st <= 600 && st < 600){}
doesn't make much sense, not to mention the empty else block which is essentially the same as the else if block in this context. You need to tidy up your code first to make it easier to understand...
Tidying Up
The .static, .open and .close css classes are basically the same, the only difference is that the last 2 add an animation. You can easily remove those declarations. Here's your new .open, .close classess...
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
now in your jQuery code you don't need to add/remove the .static css class. Also, you need to get keep track of the state of your div to know when to play the .close animation and when not to.
See all the changes below...
var open = false;
$(function(){
var element = document.getElementById("myDIV");
var scrollMarker = 599;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= scrollMarker){
open = true;
element.classList.remove("close");
element.classList.add("open");
}
//plays the close animation only if the "state" of the div is open
else if(open) {
open = false;
element.classList.remove("open");
element.classList.add("close");
}
});
});body {
background-color: black;
margin: 0;
padding: 0;
height: 2500px;
}
.static{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10965px / 15);
height: 499px;
background: url(https://www.nvidia.com/content/dam/en-zz/Solutions/titan/titan-rtx/titan-rtx-exploded-view-v022-seq1-15f-ld.jpg);
}
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes open
{
from
{
background-position: 0;
}
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV" class="static"></div>You might have to click on "Full Page" if you want to see the animation or...change the value of scrollMarker
answered Dec 31 '18 at 2:46
LeoLeo
11.4k22546
Hi Leo!, Happy new year!, thank you so much for the answer, I'm using your suggestion, but now I have a new issue, I just update the post so you can see it better.
– Tzu
Jan 2 at 2:07
add a comment |
Here's a very lazy answer on the last day of 2018...Happy New Year ;)
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= 599 && st < 799){
var element = document.getElementById("myDIV");
element.classList.add("animateOpenScroll");
}
else if(st >= 799){
//do whatever you need to do if scroll top reaches (or surpasses) 799
}
else {
//you'll need this. Fall back to the initial state...when scroll top is less than 599
}
});
});
More Details
The main problem is that your div has 2 states, not 3. It is either open or close and then your if...else block doesn't reflect this...in fact, it's a bit over the place...for example this...
else if(st <= 600 && st < 600){}
doesn't make much sense, not to mention the empty else block which is essentially the same as the else if block in this context. You need to tidy up your code first to make it easier to understand...
Tidying Up
The .static, .open and .close css classes are basically the same, the only difference is that the last 2 add an animation. You can easily remove those declarations. Here's your new .open, .close classess...
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
now in your jQuery code you don't need to add/remove the .static css class. Also, you need to get keep track of the state of your div to know when to play the .close animation and when not to.
See all the changes below...
var open = false;
$(function(){
var element = document.getElementById("myDIV");
var scrollMarker = 599;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= scrollMarker){
open = true;
element.classList.remove("close");
element.classList.add("open");
}
//plays the close animation only if the "state" of the div is open
else if(open) {
open = false;
element.classList.remove("open");
element.classList.add("close");
}
});
});body {
background-color: black;
margin: 0;
padding: 0;
height: 2500px;
}
.static{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10965px / 15);
height: 499px;
background: url(https://www.nvidia.com/content/dam/en-zz/Solutions/titan/titan-rtx/titan-rtx-exploded-view-v022-seq1-15f-ld.jpg);
}
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes open
{
from
{
background-position: 0;
}
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV" class="static"></div>You might have to click on "Full Page" if you want to see the animation or...change the value of scrollMarker
answered Dec 31 '18 at 2:46
LeoLeo
11.4k22546
Hi Leo!, Happy new year!, thank you so much for the answer, I'm using your suggestion, but now I have a new issue, I just update the post so you can see it better.
– Tzu
Jan 2 at 2:07
add a comment |
Here's a very lazy answer on the last day of 2018...Happy New Year ;)
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= 599 && st < 799){
var element = document.getElementById("myDIV");
element.classList.add("animateOpenScroll");
}
else if(st >= 799){
//do whatever you need to do if scroll top reaches (or surpasses) 799
}
else {
//you'll need this. Fall back to the initial state...when scroll top is less than 599
}
});
});
More Details
The main problem is that your div has 2 states, not 3. It is either open or close and then your if...else block doesn't reflect this...in fact, it's a bit over the place...for example this...
else if(st <= 600 && st < 600){}
doesn't make much sense, not to mention the empty else block which is essentially the same as the else if block in this context. You need to tidy up your code first to make it easier to understand...
Tidying Up
The .static, .open and .close css classes are basically the same, the only difference is that the last 2 add an animation. You can easily remove those declarations. Here's your new .open, .close classess...
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
now in your jQuery code you don't need to add/remove the .static css class. Also, you need to get keep track of the state of your div to know when to play the .close animation and when not to.
See all the changes below...
var open = false;
$(function(){
var element = document.getElementById("myDIV");
var scrollMarker = 599;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= scrollMarker){
open = true;
element.classList.remove("close");
element.classList.add("open");
}
//plays the close animation only if the "state" of the div is open
else if(open) {
open = false;
element.classList.remove("open");
element.classList.add("close");
}
});
});body {
background-color: black;
margin: 0;
padding: 0;
height: 2500px;
}
.static{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10965px / 15);
height: 499px;
background: url(https://www.nvidia.com/content/dam/en-zz/Solutions/titan/titan-rtx/titan-rtx-exploded-view-v022-seq1-15f-ld.jpg);
}
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes open
{
from
{
background-position: 0;
}
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV" class="static"></div>You might have to click on "Full Page" if you want to see the animation or...change the value of scrollMarker
answered Dec 31 '18 at 2:46
LeoLeo
11.4k22546
Here's a very lazy answer on the last day of 2018...Happy New Year ;)
$(function(){
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= 599 && st < 799){
var element = document.getElementById("myDIV");
element.classList.add("animateOpenScroll");
}
else if(st >= 799){
//do whatever you need to do if scroll top reaches (or surpasses) 799
}
else {
//you'll need this. Fall back to the initial state...when scroll top is less than 599
}
});
});
More Details
The main problem is that your div has 2 states, not 3. It is either open or close and then your if...else block doesn't reflect this...in fact, it's a bit over the place...for example this...
else if(st <= 600 && st < 600){}
doesn't make much sense, not to mention the empty else block which is essentially the same as the else if block in this context. You need to tidy up your code first to make it easier to understand...
Tidying Up
The .static, .open and .close css classes are basically the same, the only difference is that the last 2 add an animation. You can easily remove those declarations. Here's your new .open, .close classess...
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
now in your jQuery code you don't need to add/remove the .static css class. Also, you need to get keep track of the state of your div to know when to play the .close animation and when not to.
See all the changes below...
var open = false;
$(function(){
var element = document.getElementById("myDIV");
var scrollMarker = 599;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= scrollMarker){
open = true;
element.classList.remove("close");
element.classList.add("open");
}
//plays the close animation only if the "state" of the div is open
else if(open) {
open = false;
element.classList.remove("open");
element.classList.add("close");
}
});
});body {
background-color: black;
margin: 0;
padding: 0;
height: 2500px;
}
.static{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10965px / 15);
height: 499px;
background: url(https://www.nvidia.com/content/dam/en-zz/Solutions/titan/titan-rtx/titan-rtx-exploded-view-v022-seq1-15f-ld.jpg);
}
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes open
{
from
{
background-position: 0;
}
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV" class="static"></div>You might have to click on "Full Page" if you want to see the animation or...change the value of scrollMarker
var open = false;
$(function(){
var element = document.getElementById("myDIV");
var scrollMarker = 599;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= scrollMarker){
open = true;
element.classList.remove("close");
element.classList.add("open");
}
//plays the close animation only if the "state" of the div is open
else if(open) {
open = false;
element.classList.remove("open");
element.classList.add("close");
}
});
});body {
background-color: black;
margin: 0;
padding: 0;
height: 2500px;
}
.static{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10965px / 15);
height: 499px;
background: url(https://www.nvidia.com/content/dam/en-zz/Solutions/titan/titan-rtx/titan-rtx-exploded-view-v022-seq1-15f-ld.jpg);
}
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes open
{
from
{
background-position: 0;
}
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV" class="static"></div>var open = false;
$(function(){
var element = document.getElementById("myDIV");
var scrollMarker = 599;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st >= scrollMarker){
open = true;
element.classList.remove("close");
element.classList.add("open");
}
//plays the close animation only if the "state" of the div is open
else if(open) {
open = false;
element.classList.remove("open");
element.classList.add("close");
}
});
});body {
background-color: black;
margin: 0;
padding: 0;
height: 2500px;
}
.static{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10965px / 15);
height: 499px;
background: url(https://www.nvidia.com/content/dam/en-zz/Solutions/titan/titan-rtx/titan-rtx-exploded-view-v022-seq1-15f-ld.jpg);
}
.open{
animation: open 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
.close{
animation: close 0.5s steps(14);
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes open
{
from
{
background-position: 0;
}
to
{
background-position: -10234px;
}
}
@keyframes close
{
from
{
background-position: -10234px;
}
to
{
background-position: 0;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV" class="static"></div>answered Dec 31 '18 at 2:46
LeoLeo
11.4k22546
edited Jan 2 at 2:48
answered Dec 31 '18 at 2:46
LeoLeo
11.4k22546
answered Dec 31 '18 at 2:46
LeoLeo
11.4k22546
answered Dec 31 '18 at 2:46
LeoLeo
11.4k22546
11.4k22546
Hi Leo!, Happy new year!, thank you so much for the answer, I'm using your suggestion, but now I have a new issue, I just update the post so you can see it better.
– Tzu
Jan 2 at 2:07
add a comment |
Hi Leo!, Happy new year!, thank you so much for the answer, I'm using your suggestion, but now I have a new issue, I just update the post so you can see it better.
– Tzu
Jan 2 at 2:07
Hi Leo!, Happy new year!, thank you so much for the answer, I'm using your suggestion, but now I have a new issue, I just update the post so you can see it better.
– Tzu
Jan 2 at 2:07
Hi Leo!, Happy new year!, thank you so much for the answer, I'm using your suggestion, but now I have a new issue, I just update the post so you can see it better.
– Tzu
Jan 2 at 2:07
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53983078%2fhow-can-i-trigger-orl-event%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You want to change the behavior depending on whether a user is scrolling up or down? So say if I scroll towards the bottom and reach
599px, thenelement.classList.add("animateOpenScroll");is invoked (like you're showing). But if the scroll is below599pxand I scroll towards the top, you wantelement.classList.add("animateColseScroll");to get invoiked? Is that the question?– seebiscuit
Dec 31 '18 at 2:46
Hi seebiscuit!, yes, but in both ways, just update the post so you can see.
– Tzu
Jan 2 at 2:10