I'm doing a website and was using this slider for the website http://www.jqueryscript.net/slideshow/Lightweight-Background-Slideshow-Plugin-with-jQuery-CSS3-pureSlider.html ...but I'm unable to control the zooming speed of this slider..I tried various numbers for the animDuration: 8000 in the js file but it is not helping...Can anyone help with this?
In the file pureslider.css change the values of the transition-duration property as you want.
.stage .slide.on {
transition-property: opacity, transform, z-index;
transition-duration: 1000ms, 1000ms, 10ms;
transition-function: linear;
transition-delay: 0ms;
transform: scale(1);
opacity: 1;
z-index: 10;
}
Related
I am working on a new site that is using page transitions. The old content fades away and the new content fades in - at least that's what should happen.
When the new content is loaded, I use JS to set it's opacity: 0
this.newContainer.style.opacity = 0;
Then, I add a new class so I can use CSS transitions
this.newContainer.classList.add("animate-in");
This is the CSS for the .animate-in
.wrapper.animate-in {
opacity: 1;
visibility: visible;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
However, this doesn't work. The code doesn't animate the opacity from 0 to 1. Instead, it is animating backwards, from 1 to 0. It seems like the classList.add doesn't hear the previous line of code.
Anyone know how to fix this?
EDIT
OK, so I learned that using the JS style.opacity will completely override any opacity CSS rules. This is my problem. How do I get around this?
Try to use css animation and remove code--> this.newContainer.style.opacity = 0;
.wrapper.animate-in {
opacity: 1;
transition: all 1000ms ease-in-out;
animation: animate-in01 1s;
animation-iteration-count: 1;
}
#keyframes animate-in01{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Please i need help i used isotope to filter my projects but projects are not well organized because inline style translate3d values are increased .. for example the first project should start with values 0px, 0px, 0px but in my case it starts at 40px, 0px, 0px
Without including javascript code i see 4 projects well organized like this
But when i include JS code i 3 projects at one row and not organized as it should be
Please visit my website to understand the problem the projects block positioned at the bottom of the page above the footer
Javascript
jQuery('document').ready(function () {
var portfolio = jQuery('#portfolio');
var items = jQuery('.items', portfolio);
var filters = jQuery('.filters li a', portfolio);
items.imagesLoaded(function() {
items.isotope({
itemSelector : '.item',
layoutMode : 'fitRows',
transitionDuration : '0.7s'
});
});
});
CSS
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope-item {
/*I removed "transform 0.5s" and "!important"*/
transition: opacity 0.5s, background-color 0.25s linear, border-color 0.25s linear;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
You're using a very old version of isotope, v1.5.25 (from 2013) but initiating it with js code from the current version ( transitionDuration: is not part of the old version). The most current version is v3.0.4 which does not use the .isotope css. Upgrade isotope.js to the current version and remove the above CSS.
Like Fenici said in his comment, the solution to this is to drop the internal padding on your <ul> like this:
ul.items {
padding: 0;
}
Currently, there is a padding-right:40px; on the itemSelector's parent which is not used during the calculation of the isotope elements positioning due to the different box model usage in JavaScript (and subsequently Isotope).
I'm trying to do a WordCloud with zoom in-out of words. I'm using JavaScript to randomly set CSS to zoom the words, however the words just disappear and then appear.
This is my CSS code:
svg text.zoom {
/* Webkit for Chrome and Safari */
-webkit-transform: scale(1, 1); /*This is the scale for the normal size of the image. */
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
/* Webkit for Mozila Firefox */
-moz-transform: scale(1, 1);
-moz-transition-duration: 0.5s;
-moz-transition: ease-in-out;
/* Webkit for IE( Version: 11, 10 ) */
-ms-transform: scale(1, 1);
-ms-transition-duration: 0.5s;
-ms-transition-timing-function: ease-in-out;
}
Can someone help?
Looks like you have missed the standart transition property. Try adding the following CSS code
svg text.zoom{
transition: all 0.5s ease-in-out;
}
I hope this will help
I want to use this functionality in my website (when press in 'SHOW IT') --> http://labs.voronianski.com/jquery.avgrund.js/
The problem is that this functionality need to put body height to 100%. In some time, in me site I need to detect the scroll user to make topbar appear and disappear em some positions.
So to can join this two functionality's, I only change body height to 100% when I press button to show the div avground. But where I have a problem: the button is on page footer and when I change body height, they automatically send me to the top of page and after show de div avground.
Is any way to this don't happen or is possible to scroll to footer before the div avground appear?
If someone have another solution, I appreciate.
Thanks
Have you tried using bootstrap's modals? They are very simple to make and look nicer in my opinion.
http://getbootstrap.com/javascript/
You don't actually have to do that, for that animation you can use simple CSS3:
CSS:
#layer-body {
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#layer-body.hide {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
#menu {
background: rgba(208, 31, 60, .95);
position: fixed; top: 0; left: 0; z-index: 4;
width: 100%; height: 100%;
}
#menu.show {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#menu.hide {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
transition: transform 0.5s, visibility 0s 0.5s;
}
HTML:
<body>
<div id="layer-body"></div>
<div id="menu"></div>
</body>
This means, all of your website will be inside #layer-body, and the menu inside #menu.
So when you open the menu you'll have to add the class HIDE to the #layer-body and SHOW to the #menu.
I have a script which display an img when we are attack by a monster.
So, the image is always in display="none" and when there is a monster it switch to display="";
I want the image do a 360° flip when it switch from display:none to display.
html : <img id="monster" style="display:none;">
js : var skinMonster = document.getElementById('monster');
When we are in fight, i do skinMonster.style.display="";
When the fight is over, i do skinMonster.style.display="none";
I don't how to detect the moment when the style change to rotate the picture.
You could add a CSS class at the same point where you change the display.
.rotate {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
overflow:hidden;
}
Which I slightly modified from this blog post: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html
I'd recommend using a CSS transition for the rotation.
HTML
<img id="monster" src="http://www.avatarsdb.com/avatars/mike_monsters_inc.jpg" />
<button id="show">Show monster</button>
CSS
#monster {
opacity: 0;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#monster.show {
opacity: 1;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
JavaScript
var monsterImg = document.getElementById('monster'),
showMonsterButton = document.getElementById('show');
showMonsterButton.addEventListener('click', function() {
monsterImg.classList.add('show');
});
JSFiddle for demo purposes: http://jsfiddle.net/9wkA7/