Jquery CSS animation bug on mobile - javascript

I have an animation using JQuery and CSS for sliding divs into view.
This is my javascript code:
(function($) {
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
$(window).scroll(function(event) {
$(".slide-up").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-up");
}
});
});
$(document).ready(function() {
$(".heading-slide-down").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-down");
}
});
});
$(window).scroll(function(event) {
$(".slide-left").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-left");
}
});
});
$(window).scroll(function(event) {
$(".slide-right").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-right");
}
});
});
And this is my CSS
/** FADE IN SLIDING FROM BOTTOM TO TOP **/
.come-up {
transform: translateY(150px);
animation: comeup 0.8s ease forwards;
}
.come-up:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comeup {
to { transform: translateY(0); }
}
/** FADE IN SLIDING FROM TOP TO BOTTOM **/
.come-down {
transform: translateY(-100px);
animation: comedown 0.8s ease forwards;
}
.come-down:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comedown {
to { transform: translateY(0); }
}
/** FADE IN SLIDING FROM RIGHT TO LEFT **/
.come-left {
transform: translateX(100px);
animation: comeleft 0.8s ease forwards;
}
.come-left:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comeleft {
to { transform: translateX(0); }
}
/** FADE IN SLIDING FROM LEFT TO RIGHT **/
.come-right {
transform: translateX(-100px);
animation: comeright 0.8s ease forwards;
}
.come-right:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comeright {
to { transform: translateX(0); }
}
With my divs that need sliding I just apply the classes slide-up or slide-left etc.
Live demo: http://www.shivampaw.com
On my laptop it works fine, however on my phone (iPhone) the divs are already in the correct position and as I scroll towards them I see them transform away and then animate to where they should be.
I'm not sure how else I can explain this, if possible try and take a look for yourself and just scroll down the site slowly and you will see it.
How come this is happening and is there a fix?
Thanks!
Update:
The problem is that on mobile safari on an iPhone SE latest iOS the divs that should be starting positioned downwards so they can slide up into place are starting in the right place and then moving down and sliding backup when they are in view.

I'm experiencing the exact same issue.
The problem seems to be that on mobile devices, .visible() only becomes true some time AFTER the element has entered the screen (rather than EXACTLY when it enters the screen), making the element visible to you already before the animation is played.
I quick-fixed this by giving the elements an opacity of 0 and changing this only when the animation plays.
You would have to add this to your CSS:
.slide-up, .heading-slide-down, .slide-left, .slide-right {
opacity:0;
}
.come-up, .come-down, .come-left, .come-right {
opacity:1;
-webkit-transition: opacity 0.8s ease-in;
-moz-transition: opacity 0.8s ease-in;
-o-transition: opacity 0.8s ease-in;
-ms-transition: opacity 0.8s ease-in;
transition: opacity 0.8s ease-in;
}
.come-up:nth-child(odd), .come-down:nth-child(odd), .come-left:nth-child(odd), .come-right:nth-child(odd) {
opacity:1;
-webkit-transition: opacity 0.6s ease-in;
-moz-transition: opacity 0.6s ease-in;
-o-transition: opacity 0.6s ease-in;
-ms-transition: opacity 0.6s ease-in;
transition: opacity 0.6s ease-in;
}
To make sure these animations aren't played on items that are already in view when the page loads, you could add this to your jQuery:
$(".slide-up, .slide-left, .slide-right").each(function() {
if ($(this).visible(true)) {
$(this).addClass("already-visible");
}
});
And at the bottom of your CSS:
.already-visible {
opacity:1;
transform: translateY(0);
transform: translateX(0);
animation: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}

Related

how do you rotate an image at a 40degree angle from left to right?

I am trying with jQuery or js to get an image rotate left to right constantly after upload (no button).
Try this hope it will be helpful.
const img = document.getElementsByTagName("img")[0]
img.addEventListener("load", function(){
img.classList.remove('rotateRight');
img.classList.add('rotateLeft');
});
img{
heigth :200px;
width : 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ;
}
.rotateRight{
transform: rotate(-40deg);
}
.rotateLeft{
transform: rotate(40deg);
}
<div>
<img class ="rotateRight" src='https://www.w3schools.com/w3css/img_fjords.jpg'/>
</div>

CSS animations to toggle when in viewport with vanilla JS

So I have got different animations made in CSS, though the problem is that they start right away when the page loads (ofcourse). I do not want this though. Is there a way in Vanilla JavaScript to get the animation to fire up only when it is in the viewport?
I have searched in a lot of places, but I either find a plugin I need to use or jQuery.
HTML:
<div class="introduction">
<h1>I can do the following for you:</h1>
<ul>
<li>Create a custommade, new website.</li>
<li>Code a PSD template into a working website.</li>
<li>Rework an outdated website.</li>
<li>Clean up messy code of a website.</li>
</ul>
</div>
CSS:
#keyframes showOnLoad {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.introduction li {
list-style-type: none;
margin-bottom: 5px;
text-align: center;
opacity: 0;
-webkit-animation: showOnLoad;
animation: showOnLoad;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.introduction li:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.introduction li:nth-child(3) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.introduction li:nth-child(4) {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
This is the code you need.
window.addEventListener("scroll", onScroll);
function onScroll() {
for (var item of document.querySelectorAll(".introduction li")) {
elementVisible(item);
}
}
function elementVisible(el) {
let top = el.offsetTop;
let height = el.offsetHeight;
let bottom = top + height;
let IsOverBottom = top > (window.pageYOffset + window.innerHeight);
let IsBeforeTop = bottom < window.pageYOffset;
if (!IsOverBottom && !IsBeforeTop) {
el.classList.add("show");
}
}
And a bit of CSS
#keyframes slideIn {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
.show {
animation: slideIn 5s ease-in-out;
}
This is a basic implementation but it gets you closer.
http://jsbin.com/hetapaj/1/edit?css,js,output

navbar fadeIn & fadeOut at scrolling

hi i was doing a search about how to make my navbar fadeIn while scrolling down and fadeOut while scrolling Up and found nice topic helped me alot
Fading bootstrap navbar on scrolldown, while changing text color
also http://jsfiddle.net/f5UTL/
the problem is it's not fading in or out while scrolling its just appear and disappear no dynamic animation it's even moving my page while this process it is appreciated if some one told me where was my mistake at
< script >
$(function () {
var header = $('.opaque');
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 300) {
header.removeClass('opaque').addClass('navbar-fixed-top').fadeIn();
} else {
header.removeClass('navbar-fixed-top').fadeOut().addClass('opaque');
}
});
});
< /script>
.navbar-fixed-top {
background-color: rgba(128,128,128,1);
transition: background-color all 2s;
-webkit-transition: background-color all 2s;
-moz-transition: background-color all 2s;
-o-transition: background-color all 2s;
}
.navbar-fixed-top .opaque {
background-color: rgba(128,128,128,0);
transition: background-color all 2s ;
-webkit-transition: background-color all 2s ;
-moz-transition: background-color all 2s ;
-o-transition: background-color all 2s ;
}
here is the simplified version of what you want to achieve .
$(function() {
//caches a jQuery object containing the header element
var header = $('#nav');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= header.height()) {
header.fadeOut();
} else {
header.fadeIn();
}
});
});
Hope it will help you to continue.
updated fiddle.

CSS hover with mouse in translateXY

Thank you for reading my question
.ab {
position:absolute;left:50%;top:50%
}
.logo_img {
width:100px;
}
.logo_img:hover {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
#keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }
50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
<div class="ab"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img" /></div>
Problem is when mouse goes on it, and image moves, then mouse is not on image and sometimes hover does not work!
Is there any way to do animation like this hover but if mouse is not on image... it keeps going?
Is it possible to user jQuery hover and add class on hover? And delete that class after animation ends?
You can create a container div for the image, wich always stays in the same place, and put the image inside this div. Then instead of checking, if the mouse is over the image, you can check if it is over the div.
#container {
border: 1px solid black;
}
.logo_img {
width:100px;
margin-left: calc(50% - 50px);
}
#container:hover .logo_img {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
#keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }
50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
<div id="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img">
</div>
var duration = 500;
$('img').mouseenter(function() {
$(this).addClass('hvr').delay(duration).queue(function() {
$(this).removeClass('hvr');
$(this).dequeue();
});
});
CODEPEN
If you mean to make animation work without hover then add this animation-iteration-count to infinite.
.logo_img {
-webkit-animation: hvr 5s ease-out;
-ms-animation: hvr 5s ease-out;
animation: hvr 5s ease-out infinite;
}
Updated another answer using jQuery,
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
$(document).ready(function(){
$("img").on("mouseenter",function(){
$(this).addClass("logo_img");
});
$("img").on("mouseleave",function(){
$(this).removeClass("logo_img");
});
});

How to animate text cycle with JS

I have a text cycling feature I want to use on a website.
The way it works is listed below:
HTML & Javascript
<h1 class="intro-title">This is some text
<span id="changer">This text changes</span>
</h1>
<script>
var words = ["changes to this", "changes to that", "changes to there"];
var i = 0;
var text = "This text changes";
function _getChangedText() {
i = (i + 1) % words.length;
return text.replace(/This text changes/, words[i]);
}
function _changeText() {
var txt = _getChangedText();
document.getElementById("changer").innerHTML = txt;
}
setInterval("_changeText()", 1800);
</script>
This works fine and cycles through the options fine. I am wanting to animate this script, so the text rotates upwards and fades into the next text option. Is there something I can add to this script, or will it need to be written again?
Any assistance is appreciated.
There's a JSfiddle attached: https://jsfiddle.net/g59phn0b/
Create a CSS fadeOut class for the animation and add it during _changeText(). Then remove this class after animation. Add a fadeIn class for the next element if needed. Use setTimeout(); to time rotation with your css.
CSS
.fadeOut{
visibility: hidden;
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
transform: translate(0,-50px);
-webkit-transform: translate(0,-50px);
-o-transform: translate(0,-50px);
-moz-transform: translate(0,-50px);
}
JS
function _changeText() {
var txt = _getChangedText();
var d = document.getElementById("changer")
d.className = "fadeOut";
setTimeout(function(){
d.className = "";
d.innerHTML = txt;
}, 1000);
}
Here an edited JSFiddle with fadeOut. Just do the same with a fadeIn and you have your desired effect.
How is it working? I get an error, and I needed to change
setInterval("_changeText()", 1800);
to
setInterval(_changeText, 1800);
to get it working
No Need for pattern matching, or your text variable, you can just simply return words[i]
function _getChangedText() {
i = (i + 1) % words.length;
return words[i];
}
You can add the rotations with CSS to Hosch Nok's solution, or pursue a canvas option.
.fadeOut{
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

Categories

Resources