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
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 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.
So previously I had been figuring out how to specify which transition activates when a specific page is selected, I figured it out.
Now....I'm curious why there is a trailing section of the previous page when I transition out of my selected effect. Upon each click, you'll notice a trailing, fading section of the previous page:
Example: http://codepen.io/anon/pen/BzFjk
If you take a look at the original page then you'll see what I'm going for:
The goal: tympanus.net (go to Choose a transition > Rotate > Room)
There are many attributes such as the code below specifying the styling for rotateroomLeftOut and rotateRoomLeftIn...etc. But I've matched them exactly to the original code and it still doesn't look like.
#-webkit-keyframes rotateRoomLeftOut {
to { opacity: .9; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
#-moz-keyframes rotateRoomLeftOut {
to { opacity: .9; -moz-transform: translateX(-100%) rotateY(90deg); }
}
#keyframes rotateRoomLeftOut {
to { opacity: .9; transform: translateX(-100%) rotateY(90deg); }
}
#-webkit-keyframes rotateRoomLeftIn {
from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
#-moz-keyframes rotateRoomLeftIn {
from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
#keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
There is an opacity in your keyframes which is causing the colors to "trail"
Removing the opacity from the keyframes seems to solve your problem:
#-moz-keyframes moveFromRight {
from { -moz-transform: translateX(100%); }
}
Codepen
I think I found it, the culprit: pt-page-ontop
In all your cases (54 to 57) this class was added (in JS) the the page that moves out...
case 54:
inClass = 'pt-page-rotateRoomLeftIn';
outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop';
break;
...I don't know why this doesn't have the same effect on the tympanus-page, but if I change it to this...
case 54:
inClass = 'pt-page-rotateRoomLeftIn pt-page-ontop';
outClass = 'pt-page-rotateRoomLeftOut';
break;
...it works without the trail.
(You still see a veil of the out-page disappearing, but notice that's also the case on the tympanus-page, but there the transitions are just faster so you don't really see it).
Example: http://codepen.io/anon/pen/dxwuk
(BTW, your CodePen HTML had double html- and body-tags inside the body-tag, CodePen probably fixes that for you on rendering, but better check your code twice)
UPDATE
If you combine MathiasaurusRex' answer with this one, you will lose that last veil as well. Fiddle around with that to see what you like best..
I had the "same" problem months ago.
CSS - <p> leaving a trail when sliding
Sadly I didnt find any good solution, i had to use a PNG image to solve it :(
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>
Here is the fiddle:
http://jsfiddle.net/7txt3/29/
I want to have the record needle on the record like you see in my image below rotate on to the record when the user clicks the play button(see the fiddle)
The needle placement is not necessarily final and I might want it to be in the top right corner.(I've included the image needed for that and the css at the bottom)
Right now if you click play(see the fiddle, hover over on one of the record covers, click play) the record needle comes in from the left and then if you click stop on the same record it goes back out to the left. If you click play on another record before stopping the playing one it just stays in the same place.
I want it to be like the image below where it is always showing but not on the record unless you click the play button and then it rotates on. Then if you click play on another record while one is currently playing it just shifts/moves like its changing. Then of course if you click stop it goes off the record.
Here is my current script:
$(function(){
var station = $('.player-station'),
record = $('.record2:first'),
playBtns = $('.play'),
info = $('.nprecinfo');
var isPlaying = false;
playBtns.click(function()
{
var btn = $(this);
if(btn.text() == 'STOP')
{
btn.text('PLAY');
record.css({'-webkit-animation-play-state': 'paused',
'-moz-animation-play-state': 'paused'});
$('#needle').show().animate({"left": "-=120px"}, "slow");
isPlaying = false;
return;
};
playBtns.text('PLAY');
var album = btn.closest('.album');
station.text(album.find('h3').text());
info.text(album.find('.recordinfo').text());
record.css({'-webkit-animation-play-state': 'running',
'-moz-animation-play-state': 'running'});
if (isPlaying == false)
{
$('#needle').show().animate({"left": "+=120px"}, "slow");
isPlaying = true;
}
$('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");
$('#lrvinyl').hide().fadeIn();
btn.text('STOP');
});
});
and here is the current css for the record needle:
#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:-115px;
top:185px;
z-index:10;
overflow:hidden;
}
if you want to put the needle in the top right corner here is the image and css to use in the fiddle for that. You might have to move the record (.record2) a bit so just change the css to left:-4px;
#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle4.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:205px;
top:10px;
z-index:10;
overflow:hidden;
}
+1 for detailed question! :)
You're already relying on css3 for the rotating disc, and since this is quite doable with css transitions, all you need to do with the javascript is to add/remove a class.
Demo: http://jsfiddle.net/7txt3/31/
This is essentially what I added (plus some vendor prefixes)
css
#needle
transition: all .2s ease;
}
#needle.playing {
transform: rotate(-10deg);
}
jquery
changed from .animate(...) to .removeClass() and .addClass() calls.
I also changed the #needle css a bit in order to rotate from the left of the needle hand, but you could look at https://developer.mozilla.org/en-US/docs/CSS/transform-origin instead.
edit
Sorry, I missed the part about animating between record changes. One thing you can do is to remove the class and then add it back after a delay, something like this:
http://jsfiddle.net/7txt3/53/
I think this should give the desired effect.
To have the needle rotate correctly you need to set the transform origin.
http://jsfiddle.net/7txt3/35/
You of course will want to modify the speeds/percentages.
#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
top:185px;
z-index:10;
overflow:hidden;
}
#needle.playing {
-webkit-animation-name: needle_move;
-webkit-animation-duration:8s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-transform-origin: 0px 10px;
-webkit-transform: rotate(0deg);
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s;
}
#-webkit-keyframes needle_move {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(-15deg);
}
70% {
-webkit-transform: rotate(-15deg);
}
0% {
-webkit-transform: rotate(0deg);
}
}
Here's a demo using CANVAS to get the needle animation you wanted in your question.
http://jsfiddle.net/7txt3/46/
Because of the vender prefix spammed CSS3 and the lack of browser support for rotation-point. I think going CANVAS is a little cleaner.