javascript, css transition functions - javascript

I have these buttons in html:
Home
About Me
Portofolio
As you see, these buttons call functions
functions:
<script>
function slideHome(el){
var elem = document.getElementById(el);
elem.style.transition = "left 0.5s ease-in-out 0s";
elem.style.left = "0px";
}
function slideAbout(el){
var elem = document.getElementById(el);
elem.style.transition = "left 0.5s ease-in-out 0s";
elem.style.left = "1100px";
}
these 2 work perfectly fine, but now the last function:
function slidePorto(el){
var elem = document.getElementById(el);
elem.style.transition = "top 0.5s ease-in-out 0s";
elem.style.top = "-400px";
elem.style.transition = "left 0.5s ease-in-out 1s";
elem.style.left = "1300px";
}
</script>
This function needs to move down and to the left, as a result, the "slideHome" function get's a extra line of code to move it back as well.
The problem is, that in the "slidePorto"function, it skips the first transition, it moves, but not smoothly, so it quickly moves to the bottum, and then the transition to the left fires. Same problem for the "slideHome" function when I want to move back to top:0px;
How do I get these to transitions together? Thanks in advance!

You can specify multiple transitions on an element before trigerring them by the script.
This code specifies the transitions, then do the "top" part and after that ended the transition by the "left" transition part.
function slidePorto(el) {
var elem = document.getElementById(el);
elem.style.transition = "top 0.5s ease-in-out 0s,left 0.5s ease-in-out 1s";
elem.style.top = "-400px";
elem.style.left = "1300px";
}
NB: I don't understand why you specify -400px, but it works for every value you desire.

Related

increase font size iteratively using javascript

var text = document.querySelector('p')
for(var i=10px; i<=40px; i++)
text.style.fontSize = i;
I want a script which increases the font size in every iteration of the for-loop. The above code is the prototype of my requirement (which won't work since pixels can't be assigned to a variable). Help me providing the correct code.
You probably want to use setTimeout recursion instead, so the text doesn't increase in size instantly:
var text = document.querySelector('p');
function increaseTextSize(size) {
text.style.fontSize = size + 'px';
if (size <= 40) setTimeout(increaseTextSize, 50, size + 1);
}
increaseTextSize(10);
<p>my text</p>
You can also try out this demo using CSS transition effect:
// After 500ms change the font from 10 to 60px
// and css will take care of the rest
setTimeout(() => {
var text = document.querySelector('p');
text.style.fontSize = '60px';
text.style.color = 'blue'; // <-- you can also add color effects, if you want
}, 500);
p {
font-size: 10px;
color: red;
-webkit-transition: all 2.5s ease;
-moz-transition: all 2.5s ease;
-o-transition: all 2.5s ease;
-ms-transition: all 2.5s ease;
}
<p>Hello World!</p>
var text = document.querySelector('p')
for (var i = 10; i <= 40; i++) {
text.style.fontSize = `${i}px`;
}
You cannot append px in the loop since it has to be an integer.

Javascript transition works only after second hover

I am new to Javascript. I want to make my image gradually get smaller, and then resize back to its original size. What I have works, but only after hovering over the image 2 times or more.
To be clearer, when I hover my mouse over the image for the first time, it makes a very abrupt transition, but works after that. It did the same thing when using CSS instead.
What I have is this:
function enlargeImage() {
var logo = document.getElementById('logoname');
logo.style.opacity = '0.7';
logo.style.height = 'auto';
logo.style.width = '800px';
logo.style.transition = '0.7s';
}
function resizeImage() {
var logo = document.getElementById('logoname');
logo.style.opacity = '1';
logo.style.height = 'auto';
logo.style.width = '900px';
}
Should this work? Or have I coded in a way in which I shouldn't have?
Personally I like to leave animations and effects like these to CSS and leave the functionality to Javascript.
#yourImage {
width: 150px;
height: 150px;
transition: transform .25s ease, opacity .5s ease;
}
#yourImage:hover {
opacity: 0.5;
transform: scale(0.5);
}
<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="" id="yourImage">
When the image is hovered over I transform and resize the image to 0.5% of it's original size and 0.5% of it's original opacity.
I am also using the transition property to set how fast the image transitions when it is resized or when the opacity is changed.
The abruption was because of the height tag inside javascript code. change this
height: auto
Into height:400px or some value instead of auto.
function enlargeImage() {
var logo = document.getElementById('logoname');
logo.style.opacity = '0.7';
logo.style.height = '300px';
logo.style.width = '400px';
logo.style.transition = '0.7s';
}
function resizeImage() {
var logo = document.getElementById('logoname');
logo.style.opacity = '1';
logo.style.height = '600px';
logo.style.width = '600px';
logo.style.transition = '0.7s';
}
img {
height:300px;
width:400px;
}
<img onmouseover="resizeImage()" onmouseout="enlargeImage()" src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg' id="logoname">

jQuery / CSS Animation - Pause in FF and Chrome jumps back and start is not correct

In IE and Safari the pausing and resuming of the progress bar that moves around works lovely however in firefox and chrome when you hit pause it does not pause at the correct time but seems to jump back and then stops and also when you initially start the animation it does not start from the top but a little ahead of itself.
Really keen to get this fixed so its done but cannot work it out, would be great if someone could help me on a solution.
In order to start it click on the big PINK circle
FIDDLE: http://jsfiddle.net/uj4e5cw0/5/ - you will see what i mean when you start to play with it.
JS:
var playing = false;
$(document).ready(function () {
var animation = new TimelineMax();
var svgPaths = $("#ring");
for (var x = 0; x < svgPaths.length; x++) {
var path = svgPaths[x];
var pathDimensions = path.getTotalLength();
var strokeWidth = path.getAttribute("stroke-width");
path.style.strokeDasharray = (pathDimensions) + " " + (pathDimensions);
path.style.strokeDashoffset = (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
//path.style.strokeDashoffset = (/Firefox/i.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
animation.add(TweenMax.to(path.style, 20, {
strokeDashoffset: 0, onUpdate: function () {
var n = document.createTextNode(' ');
document.body.appendChild(n);
document.body.removeChild(n);
}
}), (x > 0) ? "-=0.8" : "");
}
$(document).on('click','#pause', function(e) {
$(svgPaths).attr("class", "paused");
animation.pause();
});
$(document).on('click', '#resume', function (e) {
$(svgPaths).attr("class", "active");
animation.resume();
});
$(document).on('click', '#restart', function (e) {
//$(svgPaths).attr("class", "");
//$(svgPaths).attr("class", "active");
animation.restart();
});
$(document).on('click', '#loader', function (e) {
if (!playing) {
$("svg path").attr("class", "active");
/* $("#circle").attr("class", "active"); */
$("svg path#back").attr("stroke", "#034870");
$("svg path#back").attr("fill", "#FFFFFF");
$("svg path#ring").attr("stroke", "#FF1251");
animation.resume();
playing = true;
} else {
$("svg path").attr("class", "");
/* $("#circle").attr("class", ""); */
animation.pause();
playing = false;
}
});
});
You should never mix JS+CSS animation. Remove the following CSS:
#ring.active {
-webkit-animation: load 20s 1 forwards;
-moz-animation: load 20s 1 forwards;
-o-animation: load 20s 1 forwards;
-ms-animation: load 20s 1 forwards;
animation: load 20s 1 forwards;
-ms-animation-play-state: running;
-o-animation-play-state: running;
-moz-animation-play-state: running;
-webkit-animation-play-state: running;
animation-play-state: running;
}
#ring.paused {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}

Increase/decrease element padding on scroll

I'm trying to alter the padding of an element based on the scroll position of the page; as the user scrolls further down the page, the padding increases, and as they scroll back up, the padding decreases.
My main problem is that the scrolling isn't very smooth, and occasionally if I scroll to the top of the page too fast, the padding of the element is a different size each time. My goal is to set a minimum and maximum amount of padding, so the scrolling is essentially a transition between two sizes. Can anyone see where I'm going wrong?
Here's my jQuery so far:
$(window).scroll(function(){
var h = 45;
if($(window).scrollTop() < 200){
$(".header").css({
'paddingTop': h-$(window).scrollTop() + "px",
'paddingBottom': h-$(window).scrollTop() + "px"
});
}
});
And here's my jsfiddle: http://jsfiddle.net/JDE8h/3/
Here you go:
JavaScript:
var _window = $(window),
header = $('.header'),
max = 50,
padding = parseFloat(header.css('padding-top')),
currentPadding = padding,
scrollPos = _window.scrollTop();
_window.scroll(function() {
if (scrollPos < _window.scrollTop() && currentPadding < max) {
header.css('padding', ++currentPadding + 'px 0');
} else if (scrollPos > _window.scrollTop() && currentPadding > padding) {
header.css('padding', --currentPadding + 'px 0');
}
if (_window.scrollTop() == 0)
header.css('padding', padding + 'px 0');
scrollPos = _window.scrollTop();
});
And add CSS transition property to .header:
.header{
/* other CSS declarations ...*/
-webkit-transition: padding .3s linear;
-moz-transition: padding .3s linear;
-ms-transition: padding .3s linear;
-o-transition: padding .3s linear;
transition: padding .3s linear;
}
JSFiddle Demo.
I believe you've got the numbers backwards. You are getting a negative number from your calculation. For example:
if h = 45, then 45 - $scrollTop (from your active target of 20 to 200) is very quickly a negative number.
Based on the example of the Carrera World website, I think believe is the effect you are looking for?
jQuery
$(window).scroll(function(){
var h = 45;
var $scrollTop = $(window).scrollTop();
if($scrollTop < 200 && $scrollTop > 20){
$(".header").css({
'paddingTop': $scrollTop - h + "px"; // Subtract h from scrollTop
'paddingBottom': $scrollTop - h + "px";
});
}
$('.header').text($scrollTop); // Display scrollTop value in header (for demo).
});
I also gave your header a min-height to keep it from getting too small in edge cases.
CSS
.header {
...
line-height: 40px; /** Keep things centered vertically **/
min-height: 40px;
}
Hopefully this helps you!
JSFiddle example.
You could use a library dedicated to this task, such as skrollr. It may not be worth it though if it's just the padding.
<div data-0="padding:0px;" data-200="padding:500px;"></div>
Will animate the padding from 0 to 500 pixels while scrolling from 0 to 200.
Here's a fiddle http://jsfiddle.net/JDE8h/9/

How can I change image with opacity transition in response to an onClick event using CSS3?

I want to change image with opacity transition in response to an onClick event using CSS3 without using of any javascript framework.
Here is my code which change the image but without opacity transition.
#cf img.imgClass {
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
<_div id="cf">
<_img id='imgId' src='photos/IMG_0290.JPG'>
</_div>
(function ( ) {
document.getElementsByTagName('img')[0].onclick = function () {
return function () {
var imgSrc = document.getElementById('imgId').src;
(imgSrc.indexOf('IMG_0288.JPG') > 0) ? imgSrc = 'photos/IMG_0290.JPG' : imgSrc = 'photos/IMG_0288.JPG';
document.getElementById('imgId').src = imgSrc;
document.getElementById('imgId').className = "imgClass";
}
}();
}());
By using the following javascript function it works,
but it will be possibile just using css?
If yes, how?
function fade (id) {
var dom = document.getElementById(id),
level =1,
step = function (){
var h = level.toString(10);
dom.style.opacity = h / 10;
if (level < 10) {
level += 1;
setTimeout(step, 100);
}
}
step();
}
fade('cf');
How about this:
#cf img.imgClass {opacity on css}
#cf img.imgClass:hover {opacity off css}

Categories

Resources