I want to rotate the image in y direction . My code is as follows
Js part
$(function () {
$("#content").click(function () {
var css = {
'transform': 'perspective(2000px) rotateY(-25deg )',
'transition-duration': '500ms'
};
$("#content").css(css);
});
});
CSS part
#mainpage{
height: 100%;
width:100%;
position: absolute;
top:0;
left:0;
}
#menubar{
height: 100%;
width:100px;
position: absolute;
top:0;
left:0;
background: #FF0000;
}
#content{
height: 100%;
width: 100%;
position: absolute;
top:0;
left:0;
background-image:url(images/clubs/Informals.jpg);
background-size:100% 100%;
}
HTML part
<div id="mainpage">
<div id="menubar"></div>
<div id="content"></div>
</div>
The code is working perfectly in firefox. But in chrome the perspective effect comes only after the animation is complete. In IE animation is not working it just changes to the final position. I tried adding the prefix '-webkit-' but still I am having the same problem.
You need yo use browser specific -webkit- for transform
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
To prevent your jquery becoming unmanagable I may be beneficial to put these values within a class and then just add the class rather than the css
Related
i cant seem to find the problem in my code.
I want to click the #menu and it will slide the #menudrop from the right.
#menudrop {
width: 200px;
height: 300px;
background: red;
position: absolute;
right: -9999px; /* get element out of viewport */
transition: 0.5s ease;
}
#menu{
width:100px;
height:100px;
position:absolute;
top:20px;
left:200px;
background-color:black;
}
<div id="menu"></div>
<div id="menudrop"></div>
$(document).ready(function(){
$('#menu').Click(function(){
$('#menudrop').css('right', '0px');
});
});
https://jsfiddle.net/theUnderdog/n60guhkq/
There are 2 issues in your code,
There is no function like Click (capital C used) available with jquery its click,
$(document).ready(function(){
$('#menu').click(function(){
$('#menudrop').css('right', '0px');
});
});
And its very important to include jquery library into our page before using it.
DEMO
I don't have experience with svg and animations, I have the following file jsfiddle which i want to animate the fill path color.
I want to use it as a loader so the new colour should fill the path like Sliding across or something similiar that gives it a look of "loading". You can use any color it's just an example...
Thank you
I know it's not fully the way you want to do it, but view this link:
http://cdn.tinfishcreativedev.eu/eyeLoad/
It has a VERY simple implementation (quite crude at the minute, but just to get you started).
The code in the HTML file is as follows:
<style>
body{
background:#F3F5F6;
text-align: center;
}
.loader{
background: #000;
display: inline-block;
position: relative;
height:63px;
width:100px;
margin-top:300px;
}
.loader img{
display: block;
position: absolute;
top: 0;
left: 0;
z-index:2;
}
.loaderBar{
background: #16C38B;
width: 0;
position: relative;
z-index: 1;
height:100%;
-webkit-animation:grow 2s infinite linear;
}
#-webkit-keyframes grow{
0%{ width:0; }
100%{ width: 100%; }
}
</style>
<div class="loader">
<img src="eye.png" width="100" />
<div class="loaderBar">
</div>
You could even do it with JS instead of keyframes to get it working on the older browsers like IE8 if needed.
I'm working with Firefox OS, on customer requirements I can not use frameworks for JavaScript (like JQuery), ie everything must be html, css and JS.
I have to do the pull-down menu with the same side effect of "pushing the page" (this one) we've seen in JQuery Mobile.
They know how I can do this effect?
Thanks a lot
A basic way of doing this is to create a div box (page) and set a z-index lower than the main page so its always behind the main page. Then using css you can move the main page up and down to reveal the page behind.
CSS
#page {
z-index: 999;
width:100%;
height:100%;
background-color:white;
position:fixed;
top:0;
left: 0;
-webkit-transition: all .5s ease;
}
.box {
position:fixed;
top:0;
left: 0;
height:100%;
background-image: linear-gradient(#ddd, #ccc);
width: 100%;
display: block;
z-index:1;
}
.move {
top: 0em;
margin-top:10em;
}
.moveb {
top: 0em;
margin-top:0em;
}
JavaScript
function doMove() {
var element = document.getElementById("page");
element.classList.remove("move");
element.classList.remove("moveb");
element.classList.add("move");
}
function doMoveb() {
var element = document.getElementById("page");
element.classList.remove("move");
element.classList.remove("moveb");
element.classList.add("moveb");
}
Demo
http://jsfiddle.net/cut3y0sq/
So here is the idea, creating a sidescrolling game from JS, and working on the enviroment. The foreground element is set to scroll normally, the background elements are fixed (sky, sun). I have a middleground element that I want to scroll along with the foreground, but I want it to move in smaller 'porportion' to the foreground. It is a fixed element of the page, so I suppose that I will probably need to access the layer and adjust the background-position, but I am not sure how to accomplish this in javascript. Would really like to leave jquery out of the equation and go just with the JS and CSS.
CSS code:
<style>
body{ background: #5993fc; text-align: center; height:100%; width:100%;
padding: 0; margin: 0; overflow-x: auto; overflow-y: hidden; }
.sun{ position:fixed; height: 320px; width: 320px; z-index: 10;
background-image: url('wasteland/wasteland_sun.png'); opacity: .9;}
.cloud{ position:absolute; height: 160px; width: 800px; z-index: 30;
background-image: url('wasteland/wasteland_cloud.png'); }
#ground{ position:absolute; height: 169px; width: 10000px; z-index: 130;
background-image: url('wasteland/wasteland_foreground.png');bottom: 0px;left: 0px; }
#middleground { position:fixed; height: 244px; width: 100%; z-index: 129;
background-image: url('wasteland/wasteland_middleground.png');bottom:80px;left:0px; }
</style>
You can see an example of the actual page and issue http://thomasrcheney.com/games/wasteland-perspective.html
and a jsfiddle here http://jsfiddle.net/K5f7b/
The only thing I can think of after pondering is an event listener attached to the arrowkey, but that would be useless if the user were to grab and drag the scrollbar. Just not even sure how to best approach writing a function to handle this.
http://jsbin.com/iGIToRuV/1/edit
I'm working on a WYSIWYG website designer as an experiment for a variety of reasons. (The plan is to make this desktop and mobile friendly)
One issue I'm having is getting the div#canvas to be 100% via width and height. In addition I don't even see the div#canvas on Firefox either, and unsure as to why that is.
Let me elaborate...
My div#canvas is positioned where I want it. My div.options is positioned on the right:0; and it's width is 291px. I want to tell my div#canvas to fill the page width so it covers the body, but doesn't exceed past it.
I explained the best I could, but to understand more visually, here's a design prototype I made for this post.
The HTML:
<body>
<header class="header">Links</header>
<div class="toolbox">Tools</div>
<div class="content" id="canvas"></div>
<div class="options">Options</div>
</body>
The CSS:
/* Canvas */
#canvas {
position:absolute;
top:81px; left:44px;
width:100%; height:100%;
}
.header {
position:absolute;
top:0; left:0;
width:100%; height:81px;
}
.toolbox, .options {
position:absolute;
top:81px; height:100%;
}
.toolbox { left:0; width:44px; }
.options { right:0; width:291px; }
You can specify all the four dimensions and it will stretch your canvas:
#canvas {
position: absolute;
top: 81px; left:44px; right: 291px; bottom: 0;
}