How to edit jquery slider - javascript

I'm not very experienced in Javascript/jQuery/CSS3 animations.
I needed an animated slider, so I downloaded an example from internet and tried to modify it.
At that banner image were at right side and texts were at left side.
But, I need image at left side and texts at right side.
That's why, I change the image's div and text's css this way:
Previous CSS code:
.da-img {
position: absolute;
left: 60%;
}
.da-slide p, .da-slide h2, .da-slide a {
position: absolute;
left: 10%;
}
After changed by me:
.da-img {
position: absolute;
left: 10%;
}
.da-slide p, .da-slide h2, .da-slide a {
position: absolute;
left: 40%;
}
After changing it, it worked fine:
But, when slider goes to the left to right or right to left, every things go to their previous position:
I don't understand why it happened. Every time after refreshing page, the image shows at the left side of the div for the first time, but after the slider moves, everything changes!
Please, tell me how can I fix it. You can see my touched files here.


To understand better how key frames works go here and have a read about it. they way he explains stuff is just really good.
there is some stuff you need to play with before you can make it work: this here is your start state:
.da-slide-fromleft h2{
-webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-o-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
animation: fromLeftAnim1 0.6s ease-in 0.6s both;
}
the rest is in sample at css/style.css line #337 as the name suggest is what happens when it does slide from the left side. that animation respond to this key frame:
#-webkit-keyframes fromLeftAnim1{
0%{ left: -110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
#-webkit-keyframes fromLeftAnim2{
0%{ left: -110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
that is just like saying move my element from -110% to 10% and while you do it change its opacity to 1.
what you need to do is see if there is any existing key frame that meets what you need, other wise just copy one of them change the name and play with the positions(right or left) and the %
so it will looks something like this::
.da-slide-fromleft h2{
-webkit-animation: your_custom_name 0.6s ease-in 0.6s both;
-moz-animation: your_custom_name 0.6s ease-in 0.6s both;
-o-animation: your_custom_name 0.6s ease-in 0.6s both;
-ms-animation: your_custom_name 0.6s ease-in 0.6s both;
animation: your_custom_name 0.6s ease-in 0.6s both;
}
and is key frame:
#-webkit-keyframes your_custom_name{
0%{ left: -10%; opacity: 0; }
100%{ left: 110%; opacity: 1; }
}
also you can play to make it better with the animation transitions and times, easy-in, easy-out, and so on.. more here :CLICK ME:

Related

How do you animate multi text in, stay for a few seconds and animate out using CSS

*** Update ****
Manage to get all 3 line of text to move out together but trying to resolve the issue of after moving out the text will appear again. Updated the codes below.
*** Update 2 ****
Ok, I managed to solve the issue (I think). I just need to add animation-fill-mode: forwards; for the main div and added animation-fill-mode: backwards for all the inner content. But I'm open if any expert have a better solutions.
I've been trying to learn animation and I want to this type of animation, preferably with just using CSS but if that is not possible I don't mind CSS and JS.
What I want to do is this:, I have 3 line of text
XXXXXXXXXX
xxxxxxxxx
xxxxxxxxx
When the page load, the first line will appear follow by the second and the third. Than they will stay for say 5 seconds before all 3 move out and fade off.
So far I've managed to do this: View in Codepen
.heading-primary {
color: #000;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
animation: moveOutRight 2s ease-out 10s;
animation-fill-mode: forwards;
}
.heading-primary--main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation-name: moveInLeft;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-fill-mode: backwards;
}
.heading-primary--sub {
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.75rem;
font-weight: 700;
animation: moveInLeft 2s ease-out 1s;
animation-fill-mode: backwards;
}
.heading-primary--sub1 {
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.75rem;
font-weight: 700;
animation: moveInLeft 2s ease-out 2s;
animation-fill-mode: backwards;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-10rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes moveOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(10rem);
}
}
<div class="header__text-box">
<h1 class="heading-primary"><span class="heading-primary--main">Outdoors </span><span class="heading-primary--sub">is where life happens</span>
<span class="heading-primary--sub1">is where life happens</span>
</h1></div>
But how do I make the 3 text move out together rather than one at a time. ie I want them to come in one at a time which is working but can't find a way to make them move out together. I think it has something to do with the delay timing which I've set which affect the moving out too.

Trigger same CSS animation on every click

I'm trying to trigger a CSS animation onclick, but have it restart after each click. I know I can toggle the animation on and off, but I'd like to just trigger the animation every time the button is clicked. Also, initially the CSS animation should not run. Only run when clicked.
Here's my pen.
http://codepen.io/omarel/pen/JRwpZp
HTML :
click me
Jquery :
$('.addtocart').click(function () {
$(this).addClass('on');
});
CSS :
.addtocart {
position: relative;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform: translateY(-100%);
}
10% {
transform: translateY(-100%);
}
15% {
transform: translateY(0);
}
30% {
transform: translateY(-50%);
}
40% {
transform: translateY(0%);
}
100% {
opacity: 1;
}
}

You can listen to when the animation ends, then remove the class 'on'
var animationEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';
$('.addtocart').click(function () {
$(this).addClass('on');
$(this).one(animationEvent, function(event) {
$(this).removeClass('on')
});
});
$('.addtocart').click(function () {
$(this).addClass('on');
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
$(this).removeClass('on')
});
});
.addtocart {
position:relative;
width:100px;
display:block;
background-color:#000;
color:#fff;
padding:10px;
text-align:center;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform:translateY(-100%);
}
10% {
transform:translateY(-100%);
}
15% {
transform:translateY(0);
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me

Instead of using an on click event, use :focus.
.addtocart:focus {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
Now, whenever an element with the .addtocart class is focused (or clicked on), it will have those styles. When you click away, the styles will go away.

You could use the .delay() and .queue()/dequeue() if you want to add/remove class :
$('.addtocart').click(function () {
$(this).addClass('on').delay(500).queue(function(){
$(this).removeClass('on').dequeue();
});
});
Hope this helps.
$('.addtocart').click(function () {
$(this).addClass('on').delay(500).queue(function(){
$(this).removeClass('on').dequeue();
});
});
.addtocart {
position:relative;
width:100px;
display:block;
background-color:#000;
color:#fff;
padding:10px;
text-align:center;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform:translateY(-100%);
}
10% {
transform:translateY(-100%);
}
15% {
transform:translateY(0);
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me

You can add and remove the css class on every click and inorder for you to run the css only while clicking, do this onload not on ready
Example
.addClass and .removeClass

I have a solution to remove your on class every second:
var $post = $(".addtocart");
setInterval(function() {
$post.removeClass("on");
}, 1000);
http://codepen.io/anon/pen/NRZykG

As Jacob said there is no need for javascript.
You can use CSS :focus or :target as in this codepen https://codepen.io/sebilasse/pen/rrOYQj?editors=1100
-
.root {
appearance: none;
position: relative;
width: 120px;
height: 50px;
transition: all .1s linear;
transform: translate3d(0, 0, 0);
}
.animation {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
outline: none;
}
#keyframes pulse {
0% { opacity: 0; box-shadow: 0 0 0 1px red; }
40% { opacity: 0.8; }
80% { box-shadow: 0 0 0 80px red; }
99% { opacity: 0; box-shadow: 0 0 0 0px red; }
}
.root:hover ._focus:focus::after,
.root:target ._target::after {
content: "";
display: block;
position: absolute;
width: 4px;
height: 4px;
box-shadow: 0 0 0 0px red;
border-radius: 50%;
z-index: 1;
left: 20px;
top: 25px;
transform: perspective(1px) translate(-50%, -50%);
animation-name: pulse;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
<h3>crossbrowser animation onClick hacks</h3>
<button class="root">
<div class="animation _focus" tabindex="0" onanimationend="this.blur()">
</div>
contra: steals focus
</button>
<button id="btn_1" class="root">
<a class="animation _target" href="#btn_1"></a>
contra: needs id
</button>

Chrome trouble on SVG background image rendering

The problem started on the last Chrome update, since then the images crop and just do not render properly, but not all of them, just a couple.
I am using them this way:
.ch-info > div {
text-align: center;
display: block;
position: absolute;
width: 100%;
height: 105%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
Inside the div I have this class which provide the background image.
.img-1 {
background-image: url(../images/icons/name.svg);
background-size:cover;
}
I have no idea how to fix it. I have seen that applying fixed sizes on the image solves it but the same size do not work for all the pics and I would wanna know what can be the problem. I was thinking that may be something related to changes on how the CSS property works since update but it's just a theory.
This happens only on Chrome.

Full width image to div cross-fade in CSS3 and HTML5

I have a full screen width background on my site, but I want to replace it with an image slideshow..everything works correctly, but when the images load in, they become all distorted.. I think it has something to do with the width/height being 100% and also with the "background-size: cover". Further explaination would also be awesome.
I'd like to make the image div fit exactly in the parent div as the "background-image:" property of does. Any help would be appreciated. Thank you very much!
Image DIV CSS:
#crossfade > img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
Parent DIV CSS:
.main-content {
margin-top: -5px;
display: inline-block;
content: "";
position: relative;
padding-top: -5px;
height: 300px;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background-image: url(../content/images/header_bg.jpg) no-repeat center center;
background-size: cover;
z-index: 0;
}

They get distorted because you forcefully set their width and height to 100%.
You should use min-width and min-height instead and center them with the translate transformation.
#crossfade > img {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
Additionally there are no negative paddings

HTML5/CSS3 Image Rotatation initiated by another Image Hover

When you mouse over either image, each rotates 360 degrees and changes from 50% to 100% opacity revealing image text below. I am trying to rotate the opposite image from which I hover over to simulate turning gears.
See Fiddle here.
#navBlueGear {
float:left;
transition: opacity 1s;
opacity:0.5;}
#navBlueGear:hover {
opacity:1.0;}
#aboutMe {
position:relative;
float:left;
top:130px;
left:-80px;
opacity: 0;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;}
#navBlueGear:hover ~ #aboutMe {
opacity: 1;}
.aboutLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.aboutLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
#navOrangeGear {
position:relative;
float:left;
top:85px;
left:-75px;
transition: opacity 1s;
opacity:0.5;}
#navOrangeGear:hover {
opacity:1.0;}
#work {
position:relative;
float:left;
top:176px;
left:-143px;
opacity: 0;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;}
#navOrangeGear:hover ~ #work {
opacity: 1;}
.workLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.workLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
Is it possible to turn the opposite gear counter to the image you initially hover over as well as control the speed as the teeth of each need to look realistic?
Is it possible in CSS3 and if not how would I accomplish this in JavaScript? Any other suggestions or advice is appreciated, I am just beginning to work with writing code, thank you in advance.

Try this solution
http://jsfiddle.net/BRGG2/30/
I put all elements in a containing div and set the rotation to work when that div is hovered.
Each gear keeps its own opacity and hover link.
I set the second gear to turn the opposite way using this
#container:hover .workLink {
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
transform:rotate(-360deg);
}
As to calibrate both gears speed, this will take some fine tuning, using -webkit-transition-duration.

Categories

Resources