I am trying to create a div which would look as a box, and then it would automatically rotate to show different texts within it.
The effect in question is as shown in the 'RATATOUILLE', 'LASSITUDE', 'MURMUROUS', PALIMPSEST' & 'ASSEMBLAGE' buttons on the page:
http://tympanus.net/Development/CreativeLinkEffects/
I did use the code from a previous project written by someone else (author unknown).
I have a cube div, with 4 panels in it, and first 2 panels marked initial panel and next panel
<div class="cube flip-to-bottom">
<div class="initialpanel"><span>1st Panel</span></div>
<div class="nextpanel"><span>2nd Panel</span></div>
<div><span>3rd Panel</span></div>
<div><span>4th Panel</span></div>
</div>
both styled
.initialpanel {
-webkit-transform: translateZ(25px);
-moz-transform: translateZ(25px);
-o-transform: translateZ(25px);
-ms-transform: translateZ(25px);
transform: translateZ(25px);
}
.nextpanel {
-webkit-transform: rotateX(-90deg) translateZ(-25px);
-moz-transform: rotateX(-90deg) translateZ(-25px);
-o-transform: rotateX(-90deg) translateZ(-25px);
-ms-transform: rotateX(-90deg) translateZ(-25px);
transform: rotateX(-90deg) translateZ(-25px);
}
and finally a class which enables flip on the cube div
.flipNow {
-webkit-transform: rotateX(89deg);
-moz-transform: rotateX(89deg);
-o-transform: rotateX(89deg);
-ms-transform: rotateX(89deg);
transform: rotateX(89deg);
}
Tying these two together is my javascript which would go through the cube's children div, renaming through each iteration to animate using CSS.
function startRotating(currentIndex) {
current = $(".cube >div.initialpanel");
nextCurrent = current.next();
next = $(".cube >div.nextpanel");
nextNext = next.next();
var flipNow = setTimeout(function(){
$(".cube").addClass("flipNow");
}, 2000);
var stopFlip = setTimeout(function(){
$(".cube").removeClass("flipNow");
current.removeClass("initialpanel");
next.addClass("initialpanel");
next.removeClass("nextpanel");
nextNext.addClass("nextpanel");
}, 3000);
setTimeout(function(){
if(nextNext.length ===1){
startRotating($("div.initialpanel"));
}
},4000);
}
This code is supposed to rotate panel 1 and show panel 2, and rotate panel 2 and show panel 3, and rotate panel 3 and show panel 4 and stop after panel 4 as there are no more panels.
The rotation and revelations occour as expected, but due to removing flipNow class and renaming children div classes, the flip reverts back to initial position and then rotates to its new position. This is a link where a working copy of my problem is being hosted: http://jsfiddle.net/fatgamer85/m71osbLt/4/
any help would be appreciated which would help me to stop the double rotation on every panel reveal.
Thanks
I modified your fiddle (quite heavily) to give you a general case for N sided figure (in my example it's 5): fiddle. If you need further explanation, ask.
Related
So I'm super new to JavaScript and web development in general but I'm trying to find a way to toggle an element by clicking on another element.
To clarify, this is for the mobile version of my site. This is what it looks like now:
https://i.stack.imgur.com/F3lVo.png
What I'm trying to do is have the little hamburger menu in the bottom left corner be clicked to reveal my navigation bar which would slide in from the right.
If it makes the solution any different I am also using media queries to hide the navigation bar once the webpage becomes a certain width.
Here's what the JavaScript looks like for the hamburger menu so far:
<script>
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
hamburger.toggleClass('active');
return false;
});
});
</script>
And here's the CSS it activates:
#hamburger-icon.active .line-1 {
transform: translateY(10px) translateX(0) rotate(45deg);
-webkit-transform: translateY(10px) translateX(0) rotate(45deg);
-moz-transform: translateY(10px) translateX(0) rotate(45deg);
}
#hamburger-icon.active .line-2 {
opacity: 0;
}
#hamburger-icon.active .line-3 {
transform: translateY(-11px) translateX(0) rotate(-45deg);
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
-moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
}
This animates the hamburger menu to become and X when clicked, but is there any way I can also have it trigger my navigation bar to become visible? Any help would be appreciated, thanks!
Yes, of course it can. Here's how you'd do it:
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
var navbar = $"#navbar"); //You'll have to edit this line, I'm just guessing
hamburger.click(function() {
hamburger.toggleClass('active');
navbar.toggle();
});
});
Note that you'll have to change the var navbar = $("#navbar"); as I don't know what your navbar is.
Maybe you could try like this:
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
hamburger.on('click', function(){
hamburger.toggleClass('active');
});
});
I have a working slider, and it works perfectly but what I am looking for is different effect of what currently it has, Here is a working JSFiddle Example
On each slide image is zooming out and I am looking for opposite effect, that will zoom-in instead of current effect, but unable to do it.
Code is following
<div id="demo-1" data-zs-src='["https://cdn.img42.com/35f7070a6c188d7e325a8c93db7fec05.jpeg", "https://cdn.img42.com/42d703e80b91ac0d7b412e649f761af5.jpeg", "https://cdn.img42.com/e864ec05541d5f0adbc6b73063d05d5c.jpeg"]' data-zs-overlay="dots">
<div class="demo-inner-content">
<h1><span>Testing</span> . <span>Slider</span></h1>
<p>Testing Slider Test Slideshow Test Slideshow Test Slideshow </p>
</div>
</div>
change the scale factor to desired value in css (here i did to 1.0)
.zs-enabled .zs-slideshow .zs-slides .zs-slide {
background: transparent none no-repeat 50% 50%;
background-size: cover;
position: absolute;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
and change the tween value to desired value (i did to 1.5)
.css( { 'opacity': 1.0, 'transform': 'scale(1.5, 1.5)', 'z-index': 2 } )
updated fiddle example
I wanted to rotate an image by css and javascript. I do not have much knowledge in css. I have tried by transform.
my css :
.rotate-90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
Here is the fiddle before applying rotating css.
And here is the fiddle after applying css.
I want output like this attachment
EDIT:
For more clear insight Image rotation is working fine. I am having problem in css. When i am adding css class it is overlaping top buttons. I need to rotate and adjust image in a way that image never overlap my buttons and my page footer.
Can anyone suggest me how can I adjust image that after rotating it will adjust his position and will not overlap top buttons or footer design?
Any suggestion will be appreciated.
Let's start by giving the image an id:
<img id="image" alt="Web_ileana-d-cruz" class="" src="https://photochute-dev.s3.amazonaws.com/uploads/event_image/image/108/web_ileana-d-cruz.jpg?c=1435318866">
Now just grab both the image and the rotate button by id and add an event listener to the rotate button:
var image = document.getElementById("image");
var rotateButton = document.getElementById("rotate_image_button");
rotateButton.addEventListener("click", function(e) {
e.preventDefault();
if(image.className === "rotate-90") {
image.className = "";
} else {
image.className = "rotate-90";
}
return false;
});
And that's it.
Basically on click you check whether or not the image has the rotated class and then just add/remove it.
This is even simpler if you use jquery. If the image can have more than just 1 class then you would need to use:
if((image.className+" ").indexOf("rotate-90 ") !== -1) {
image.className = (image.className+" ").replace("rotate-90 ", "");
} else {
if(image.className) {
image.className += " rotate-90";
} else {
image.className = "rotate-90";
}
}
JSFiddle: http://jsfiddle.net/wo6mos9r/3/
To add to the first answer;
If you want the rotation to be animated aswell, you need to add this bit of CSS;
img {
transition: rotate 0.5s ease;
}
Please note that you will need browser prefix to make it work in all CSS3 browsers.
Update
With more info from the user, this problem seems to be a duplicate of Rotated elements in CSS that affects their parent's height correctly
I am answering it because someone can get help from this answer.
After some research and help from SO great users I have found solution of this issue.
Solution:
I needed to translateY(-100%) with transform origin and needed to set min height and width to image container div.
.rotate-90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
}
After loading image I have set min height and width by js:
$("#single_image .cropBox img").load(function() {
$("#single_image").css("minWidth", this.getBoundingClientRect().width)
$("#single_image").css("minHeight", this.getBoundingClientRect().height)
});
Here is the fiddle
Is it possibe to stop an infinitely looping animation at the end keyframe or to set the animation to the end keyframe?
I have an animation that I want to play again and again but be able to pause it after each iteration precisely at the end keyframe.
I thought this would be easy by just pausing the animation with
animatedElement.on(
"animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration",
function () {
animatedElement.css({
"-moz-animation-play-state": "paused",
"-o-animation-play-state": "paused",
"-webkit-animation-play-state": "paused",
"animation-play-state": "paused"
});
}
);
But the problem is that when tha animation is paused it has already begun on the next iteration. Thus, in practice, the animation is not stopped at the end keyframe but at the beginning of the next animation iteration.
In other words, in the animation beneath, the animation does not stop on 100% (90deg) but it stops some short time after the animation has already started from 0% (0deg) again.
#keyframes rotateAnim {
0% {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
}
JSFiddle example
I am looking to flip an image. I have gotten the css to work using:
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
I am looking to apply this to an image but am unsure of the formatting.
I tried doing:
var flip = "-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'";
And then:
$("#chicken").delay(scrolllen).fadeOut(0).css({ left: 2600 + "px" , top : 2370 + "px" + flip}).fadeIn(0).animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
at a later point, but it doesn't seem to apply.
Are you trying do to something like this?
$('#image').mouseover(function(){
$(this).addClass('flipped');
}).mouseleave(function(){
$(this).removeClass('flipped');
});
the css:
.flipped {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}
jsFiddle here
I'd just use a class, like so:
.flipped {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Then just swap the class:
$("#chicken").delay(2000).fadeOut(1, function() {
$(this).addClass('flipped').show()
.animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
});
FIDDLE
I'm not completely sure I understand what you're looking for.
I'm thinking perhaps it can be done without any JavaScript at all? If you're looking to flip along the X axis, with some animation?
Flipping Image on Hover
JSFiddle: Image Flip on :hover
For this demo, I had to place the image HTML into a wrapper <div>, because otherwise the :hover and the scale() changes conflict with one another in funky ways. You'll understand if you remove the wrapper <div>.
HTML
<div class="flippy">
<img src="http://lorempixel.com/200/200/"/>
</div>
CSS:
.flippy>img {
/**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1);
transform:scale(1,1);
/**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease;
transition:all 600ms ease; }
.flippy:hover>img {
/**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);
transform:scale(-1,1); }
If you need to control it with JavaScript, it should be easy enough to replace the :hover with another class, like .flipped, then do as you please in JS to activate it's flip state on and off.
//Chase.
Flipping Image on Attribute (click-based demo)
jsFiddle: Image Flip on Attribute
In this demo, the image flips when is has the flipped attribute set.
JavaScript:
// Toggles the 'flipped' attribute on the <img> tag.
$('.flippy').click(function(){
if ($(this).attr('flipped'))
$(this).removeAttr('flipped');
else $(this).attr('flipped','flipped');
});
CSS:
/* vendor-prefixes have been removed in this example */
/* We just change the scale based on the flipped attribute */
.flippy {
transform:scale(1,1);
transition:all 600ms ease; }
.flippy[flipped] {
transform:scale(-1,1); }
HTML: <img class="flippy" src="http://lorempixel.com/200/200/"/> -- as you can see, we no longer need the <div> wrapper for this example, as the :hover conflicts are no longer an issue.
//Chase.
<style type="text/css">
.transform-image {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
</style>
<script type="text/javascript">
$("#chicken").hover(function(){
$(this).addClass("transform-image") },
function () {
$(this).removeClass("transform-image");
};
})
</script>