I'm trying to move a div left and increase the height and width by 100px. I could do this using JQuery but I was wondering how I will do it using JavaScript/CSS3?
$("#button").click(function(){
$("#div").animate({
left: '250px',
height: '+=100px',
width: '+=100px',
});
});
I'm using the translate function to move it
-webkit-transform: translate(100px,0);
But I'm not sure how to go about increasing the size.
Any ideas?
Thank you!
How about keyframes?
#keyframes identifier {
0% { width: 25%; height: 40%; }
30% { width: 30%; height: 30%; }
68%, 72% { width: 75%; }
100% { width: 80%; height: 50%; }
}
One option is scale:
transform: scale(sx[, sy]);
to make 2x:
transform: scale(2);
or 2x width, 3x height:
transform: scale(2,3);
Related
I am attempting to use css in a small html game I am making for school.
I am blind and use a screen reader to code however the styling of an element is not read out.
I've been told that all my content is in a small rectangle or square in the corner of the screen.
I am using ng-animate which also has no effect.
What am I doing wrong, all my selectors match.
My css:
body {
width: 100%;
height: 100%;}
#canvas{
bottom:0px;
}
.settings.ng-enter{
animation-name: expand;
animation-duration: 2s;
}
#keyframes expand {
0% {
margin-top : 50%;
margin-left : 50%;
margin-bottom : 50%;
margin-right : 50%;
width: 0%;
height: 0%;
}
100% {
margin-top : 0%;
margin-left : 0%;
margin-bottom : 0%;
margin-right : 0%;
width: 100%;
height: 100%;
}}
The animation is meant to expand from the centre into full screen, the rest is meant to be full screen apart from the canvas which I tried setting with js to be a square with screen width being the length of each side. I've tried placing it at the bottom of the screen with the css and setting its width again to screen width but it doesn't do anything
You can try something like this aswell if you just want to animate from the center to the edges into fullscreen!
otherwise you could try with using transform instead of margins (if you need this solution - i can add it later).
you could also give your .ng-enter class display: block since margin: auto (which would be the correct solution to center an object) doesn't work with display: static
.wrapper {
position: relative;
width: 100%;
height: 100vh;
}
.container {
width: 100%;
height: 100vh;
background: black;
position: absolute;
top: 0;
left: 0;
animation-name: expand;
animation-duration: 4s;
}
#keyframes expand{
0% {
width: 0;
height: 0;
left: 50%;
top: 50%;
}
}
100%{
width: 100%;
height: 100vh;
left: 0;
top: 0;
}
}
<div class="wrapper">
<div class="container"></div>
</div>
I have a preloader on my page which should be displaying an animation. The animation should be showing on top of the dark black background before the page has loaded... but the animation is not displaying.
http://www.samnorris.net/portfolio-ss/
The animation works if I put it's CSS into #windowloader, but because I need it to be on top of a solid background (to hide unloaded content...) I thought to put it into an :after pseudo-class to load it on top of the #windowloader div... but for some reason this is not working.
is my CSS incorrect, or something else...?
Here is the Codepen which shows the animation that should be displaying:
http://codepen.io/devilishalchemist/pen/emOVYQ
HTML:
<div id="windowloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Relevant CSS from my page:
/* ==========================================================================
PAGE LOADER
========================================================================== */
.nonscroll {
overflow: hidden;
}
#windowloader {
overflow: auto;
top:0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 999998;
display: table;
background: $black;
}
#windowloader {
&:after {
content: '';
display: block;
position: absolute;
z-index: 999999;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
animation: loader 1.2s infinite ease-in-out;
span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #EE4040;
animation: loaderBlock 1.2s infinite ease-in-out both;
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(3) {
bottom: 0;
left: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
}
/*LOAD FINISH*/
.loaded {
top: -100%;
}
}
}
#keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
#keyframes loaderBlock {
0%, 30% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(90deg);
}
}
#keyframes loaderBlockInverse {
0%, 20% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(-90deg);
}
}
FWIW, I have also tried:
#windowloader:after { }
Javascript:
///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////
$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});
$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
$("body").removeClass('nonscroll');
$("#windowloader").remove();
$("#portfoliogrid").isotope('layout');
$("#isotopeMembers").isotope('layout');
$(".isotopeBlog").isotope('layout');
});
Bah, nevermind - I just put the animation in a separate div inside the #windowloader div which probably works well enough I guess..
I am trying to simulate a transfer of images by showing an image disappearing from the originating device and after a delay appearing on the target device. The application is for an experiment to design gestures
I have done the following that shows how an image appears and disappears when hovered upon
#pic3 {
max-width: 800px;
max-height: 500px;
width:500px; height:800px;
position:absolute;
}
#pic3 {
max-width: 800px;
max-height: 500px;
width:500px; height:800px;
position:absolute;
}
#pic4 {
width:500px; height:800px;
position:absolute;
max-width:800px;
max-height: 500px;
opacity:0;
-webkit-transition: opacity 1s;
}
#pic3:hover ~ #pic4, #pic4:hover {
opacity:1;
}
<div class="maps1">
<img id="pic3" src="http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg" />
<img id="pic4" src="http://www.garageservicesruislip.co.uk/communities/5/004/008/507/645/images/4586026183.jpg />
</div>
you have a typo in your html in the last img (missing ")
btw. i would try to solve it using jQuery
If you are trying to make an animation on one device - ie a desktop computer - trigger an animation on another device - ie a smartphone - you're going to need some means of communicating between the two. There will need to be some kind of session ID or other marker to facilitate communication between two separate browsers accessing content on a webpage each of them has loaded and rendered separately.
You'll be able to achieve this kind of functionality in a number of ways, but I suggest reading up on websockets using node.js.
If you're simply trying to mock it up on one screen (read: one browser, one session) then you're best off doing something like what #jbutler483 describes.
A simple Keyframe solution:
.device {
position: absolute;
height: 200px;
width: 150px;
background: gray;
border: 10px solid black;
border-radius: 5px;
top: 0;
left: 400px
}
.device:first-child {
right: auto;
left: 0;
}
img {
height: 100px;
width: 100px;
z-index: 8;
position: absolute;
top: 20px;
left: 30px;
-webkit-animation: animated 5s infinite;
animation: animated 5s infinite;
-webkit-animation-direction: linear;
/* Chrome, Safari, Opera */
animation-direction: linear;
}
#-webkit-keyframes animated {
10% {
opacity: 1;
}
30% {
opacity: 0;
left: 30px;
}
60% {
opacity: 0;
left: 430px;
}
90% {
left: 430px;
opacity: 1;
}
100% {
left: 430px;
opacity: 1;
}
}
#keyframes animated {
10% {
opacity: 1;
}
30% {
opacity: 0;
left: 30px;
}
60% {
opacity: 0;
left: 430px;
}
90% {
left: 430px;
opacity: 1;
}
100% {
left: 430px;
opacity: 1;
}
}
<div class="device"></div>
<img src="http://placekitten.com/g/300/300" />
<div class="device"></div>
My Approach
You could use Keyframes for this, and use a little magic to create a nice effect. Here I've used rotation, opacity, and movement to generate this 'movement' from one device to another.
.start,
.end {
position: absolute;
height: 250px;
background: gray;
border: 10px solid black;
border-radius: 5px;
width: 100px;
top: 0;
left: 0;
}
.end {
left: auto;
right: 0;
}
.imgMove {
background: url(http://placekitten.com/g/300/300);
background-size: 100% 100%;
height: 50px;
width: 50px;
position: absolute;
top: 100px;
left: 40px;
z-index: 8;
-webkit-animation: myfirst 3s infinite;
animation: myfirst 3s infinite;
}
#two {
background: url(http://placekitten.com/g/200/300);
-webkit-animation-delay: 0.5s;
animation-delay: 0.4s;
}
#three {
background: url(http://placekitten.com/g/300/200);
-webkit-animation-delay: 0.1s;
animation-delay: 0.6s;
}
#-webkit-keyframes myfirst {
0% {
top: 100px;
height: 50px;
width: 50px;
opacity: 0;
}
50% {
top: 10px;
height: 200px;
width: 200px;
left: calc(50% - 100px);
-webkit-transform: rotate(360deg);
opacity: 1;
}
100% {
top: 100px;
height: 50px;
width: 50px;
left: 90%;
-webkit-transform: rotate(720deg);
opacity: 0;
}
}
#keyframes myfirst {
0% {
top: 100px;
height: 50px;
width: 50px;
opacity: 0;
}
50% {
top: 10px;
height: 200px;
width: 200px;
left: calc(50% - 100px);
transform: rotate(360deg);
opacity: 1;
}
100% {
top: 100px;
height: 50px;
width: 50px;
left: 90%;
transform: rotate(720deg);
opacity: 0;
}
}
<div class="wrap">
<div class="imgMove" id="one"></div>
<div class="imgMove" id="two"></div>
<div class="imgMove" id="three"></div>
<div class="start">START</div>
<div class="end">END</div>
</div>
This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Closed 8 years ago.
I am trying to achieve this effect using HTML/CSS:
What I have until now is this
http://jsfiddle.net/zxq91ok0/
.wrap {
position: relative;
overflow: hidden;
width: 100%;
height:250px;
margin: 0 auto;
background-color:#B2C2CC;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 50%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
The problem I face is that instead of plain background color I have another image as a background so I can't figure out how to get rid of the light blue background.
Can you help me accomplish the effect shown on the first image?
Thanks!
I think you can't add a triangle in your shape and use it as a mask like that. You need to use SVG shapes and masks or the CSS mask-image property (example - beware that's not supported by all browsers).
I am looking for a way to adjust the transform on the background for this codepen. The goal would be to adjust the placeholder images so that it sits in it's normal position before the mouseenter, but still have the div rotated so it's a diamond square. As you can see, I have a jQuery animation that will come into play as well. Here is the Codepen:
http://codepen.io/pdnellius/pen/EfkHl
EDIT: I've updated my code to reflect my changes that I've made which gets the effect 90% there, however this feels really hacky.
I had to use a <img> tag instead of a background image on a <div> to achieve the desired effect. Can anyone recommend a solution that could center the <img> while maintaining the proportions when it goes 100% width? Usually I would use a background image with a contain property to achieve this effect, but since I've had to use a <img> tag in order to get this effect working, I'm unable to do that. I've updated the Codepen above to reflect my progress.
HTML
<div id="wrapper">
<div class="diamond">
<img src="http://placekitten.com/2100/2800" class="diamond-img">
</div>
</div>
CSS
body {
margin: 0;
top: 0;
left: 0;
right: 0;
}
#wrapper {
margin-top: 15em;
}
.diamond {
width: 30em;
height: 30em;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
background: aquamarine;
margin: 0% 50%;
position: absolute;
overflow: hidden;
}
.diamond:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.diamond-img {
height: 60em;
-webkit-transform: rotate(45deg);
-webkit-transform-origin-y: 30%;
-webkit-transform-origin-x: 96%;
}
JS
$( document ).ready(function() {
$(".diamond").on("mouseenter", function(){
console.log("entered .diamond");
$(".diamond").animate({
transform: 'rotate(0deg)',
transformOrigin: '0 0',
margin: '0 0',
width: '100%',
height: '40em'
}), $(".diamond-img").animate({
width: '100%',
height: 'auto',
transform: 'rotate(0deg)',
}),
$("#wrapper").animate({
marginTop: '0'
})
}).on("mouseleave", function(){
$(".diamond").animate({
transform: 'rotate(-45deg)',
transformOrigin: '0 100%',
width: '30em',
height: '30em',
margin: '0 50%'
}), $(".diamond-img").animate({
height: '60em',
transform: 'rotate(45deg)',
width: '45em',
// transformOriginX: '30%',
// transformOriginY: '96%'
}),
$("#wrapper").animate({
marginTop: '15em'
})
});
});
Ok, from THIS webpage, we modify your fiddle with a :before kludge to get this - FIDDLE.
Any better?
CSS
#wrapper {
margin-top: 15em;
}
.diamond {
position: relative;
overflow: hidden;
width: 30em;
height: 30em;
margin: 0% 50%;
}
.diamond:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(http://www.placehold.it/2000x2000) 0 0 no-repeat;
background-size: cover;
background-position: center;
}
.diamond:hover:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(http://www.placehold.it/2000x2000) 0 0 no-repeat;
background-size: cover;
background-position: center;
transform: rotate(45deg);
}