im trying to do a css background animation with the Body tag. Here's the code
body
{
animation-name:mymove;
animation-duration:5s;
animation-direction:alternate;
animation-iteration-count:infinite;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}
#keyframes mymove
{
from {background-image:url('Space.png');}
to {background:blue;}
}
#-webkit-keyframes mymove
{
from {background-image:url('Space.png');}
to {background:blue;}
}
But when i use it the background just fades from white to blue. Is there a reason why the image wont display? And by the way the image directory is correct and works if i just set it as the background image.
Background image isn't a property that can be animated - you can't tween the property. Thus you cant use it with keyframe animations. Instead try this code-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{background:url('Space.png');}
#frame
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%; /* or the height of webpage is px */
width: 100%; /* or the width of webpage is px */
animation-name:mymove;
animation-duration:5s;
animation-direction:alternate;
animation-iteration-count:infinite;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}
#keyframes mymove
{
from {background:transparent;}
to {background:blue;}
}
#-webkit-keyframes mymove
{
from {background:transparent;}
to {background:blue;}
}
</style>
</head>
<body>
<div id="frame">
<--- Webpage contents --->
</div>
</body>
</html>
Related
Problem:
Need to execute an action when an element enters the middle third area of the viewport:
Constraints:
I am using Alpine JS.
According to the Alpine intersect docs, I can control the rootMargin property of the underlying IntersectionObserver using .margin, in order to change the limit where the observer will trigger. I'm doing it as follows:
h1 {
margin-top: 95vh;
position: relative;
background-color: blue;
color: white;
z-index: 2;
}
body {
height: 200vh;
}
body::before,
body::after {
content: '';
position: fixed;
left: 0;
right: 0;
height: 33%;
background-color: grey;
z-index: 1;
}
body::before{
top: 0;
}
body::after{
bottom: 0;
}
<html>
<head>
<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/#alpinejs/intersect#3.x.x/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<h1 x-data="{ message: 'Alpine Is Working' }"
x-intersect:enter.margin.-33%.0.-33%.0="message = 'ENTERED'"
x-intersect:leave.margin.-33%.0.-33%.0="message = 'LEFT'"
x-text="message"></h1>
</body>
</html>
In the above example, you can see it's not respecting the 33% top/bottom margin with the viewport. I marked those in grey using pseudoelements.
What should happen:
In the example above, it should say "Entered" or "Left" when the element scrolls into and out of the white area.
Any idea on what I may be doing wrong?
Thanks!
Your code wouldn't work for me in the code snippet, but did as soon as I copied it out to a local html file and ran it there.
The iframe is messing with the intersection observer's root.
Your code is useful to me, I hadn't been able to find an example combining the :enter and :leave modifiers.
First-time posting a question, and I avow up front that my HTML/CSS/Javascript knowledge is ... shall we say scrappy. I usually manage, but I can't seem to figure this out.
All I want to do is display an image centered. Then create a canvas, position the canvas over the image, and draw on it. Then have the canvas stay with the image as the browser is re-sized. Here's what I have so far (I confess, I got much of the Javascript code from another poster, and I'm trying to use it as a learning example):
<!DOCTYPE html>
<html>
<head>
<script>
function myInit()
{
hdc = set_canvas();
hdc.fillRect(0, 0, 50, 50);
}
function set_canvas()
{
var img = document.getElementById('audubon_image');
var x = img.offsetLeft,
y = img.offsetTop,
w = img.clientWidth,
h = img.clientHeight;
var c = document.getElementById('myCanvas');
img.parentNode.appendChild(c);
c.style.zIndex = 1;
c.style.left = x + 'px';
c.style.top = y + 'px';
c.setAttribute('width', w+'px');
c.setAttribute('height', h+'px');
hdc = c.getContext('2d');
return(hdc);
}
</script>
<style>
#container
{
text-align: center;
}
canvas
{
pointer-events: none;
position: absolute;
border: 1px solid black;
}
</style>
</head>
<body onload='myInit()'>
<div id="container">
<img src="http://www.sturtz.org/john/audubon/wp-content/uploads/2015/04/Audubon.jpg" id="audubon_image" />
<canvas id='myCanvas'></canvas> <!-- gets re-positioned in myInit(); -->
</div>
</body>
</html>
What's supposed to happen: The image gets placed. Then the Javascript code determines the position and size of the image, and sets the canvas to match. Then draws on the canvas (for the moment, a lovely elegant block box in the upper left corner).
So far, so good. But since the image centered, if the browser is re-sized (specifically made wider or narrower), the image's position moves relative to the left and right edges of the browser window.
With 'position: absolute' specified for the canvas, the canvas does not move (unsurprisingly; I suppose that's what absolute means). So the image and canvas do not stay aligned.
If I change the canvas CSS to 'position: relative', then when I re-size the window, the image and canvas remain in the same position relative to one another (which is what I want). But then I can't get the canvas over the top of the image.
My gut feel is that this should be possible (easy, even), and my lack of knowledge is causing me not to see it.
I think I'm on to it.
Put the canvas in a div. Wrap that and the img in a container div. Specify 'position: relative' for the outer div, 'position: absolute' for the inner div. That way, the x and y coordinates of the div containing the canvas may simply be specified as (0,0).
<!DOCTYPE html>
<html>
<head>
<script>
function myInit()
{
hdc = set_canvas();
hdc.fillRect(0, 0, 50, 50);
}
function set_canvas()
{
var c = document.getElementById('map_canvas');
c.style.zIndex = 1;
c.setAttribute('width', '650px');
c.setAttribute('height', '300px');
hdc = c.getContext('2d');
return(hdc);
}
</script>
<style>
#image_container
{
margin-left: auto;
margin-right: auto;
width: 650px;
position: relative;
}
#canvas_container
{
position: absolute;
top: 0px;
left: 0px;
}
#map_canvas
{
}
</style>
</head>
<body onload='myInit()'>
<div id="image_container">
<img src="http://www.sturtz.org/john/audubon/wp-content/uploads/2015/04/Audubon.jpg" id="audubon_image" />
<div id="canvas_container">
<canvas id="map_canvas"></canvas>
</div>
</div>
</body>
</html>
How to position the canvas directly over the img with the container horizontally centered.
Keep the canvas directly over the image
Set both #audubon_image and #myCanvas to position:absolute inside the #container that's set to position:relative.
Center the container div
margin:0 auto; to center #container on the page.
CSS
#container{
margin:0 auto;
position:relative;
border:1px solid blue;
}
#audubon_image,#myCanvas{position:absolute; top:0px; left:0px;}
#audubon_image{border:1px solid green;}
#myCanvas{ border:1px solid red;}
Javascript
Set the #container's CSS size and #canvas's element size to equal the img's size. Be sure to set the canvas element size (not css size) or your canvas drawings will be distorted.
// get a reference to #audubon_image
var img=document.getElementById('audubon_image');
// set #container's size to equal the #audubon_image size
var container=document.getElementById('container');
container.style.width=img.width+'px';
container.style.height=img.height+'px';
// set #myCanvas's size to equal the #audubon_image size
var canvas=document.getElementById('myCanvas');
canvas.width=img.width;
canvas.height=img.height;
Note: Once in a great while, browsers will fire window.onload before the image's width & height are set (shame on you browsers!). So in production, you might "defensively" wrap the javascript inside a setTimeout of 1 second to be sure the image's width & height have been set.
Full code and a Demo:
window.onload = (function() {
// get a reference to #audubon_image
var img = document.getElementById('audubon_image');
// set #container's size to equal the #audubon_image size
var container = document.getElementById('container');
container.style.width = img.width + 'px';
container.style.height = img.height + 'px';
// set #myCanvas's size to equal the #audubon_image size
var canvas = document.getElementById('myCanvas');
canvas.width = img.width;
canvas.height = img.height;
});
body {
background-color: ivory;
}
#container {
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
#audubon_image,
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
}
#audubon_image {
border: 1px solid green;
}
#myCanvas {
border: 1px solid red;
}
<div id="container">
<img id="audubon_image" src='https://dl.dropboxusercontent.com/u/139992952/multple/character3.png' />
<canvas id='myCanvas'></canvas>
</div>
I'm working with PaperJS. When I resize the browser window, I ask the canvas to redraw. However, the graphics do not re-center, as I draw the graphics from view.center:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/paper-full.min.js"></script>
<script type="text/paperscript" canvas="paperjs-canvas">
var center = new Path.Circle(view.center, 450);
center.fillColor = '#000000';
function onResize(event) {
// redraw canvas
paper.view.draw();
}
</script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden; /* avoid Mac / Chrome overscroll */
}
#paperjs-canvas {
width: 100%;
height: 100%;
background-color: #D0E7D1;
}
</style>
</head>
<body>
<canvas id="paperjs-canvas" class="off" data-paper-resize="true"></canvas>
</body>
</html>
I checked from Developer Console that the resize function is called every time I resize the browser, but the paper.view.draw(); does not re-align the graphics.
What did I miss?
Running on Google Chrome 41, Mac OS X 10.10.2
View.center is just a regular coordinate. There's nothing special about it that keeps an object positioned there locked at the "center" of the canvas.
If you want to keep the same point as view.center after resizing the canvas, you can use view.scrollBy(point) to transform the coordinate system. Just keep in mind that the point [0,0] may no longer correspond to the top-left of the canvas.
var center = new Path.Circle(view.center, 240);
center.fillColor = '#000000';
var lastPoint = view.center;
function onResize(event) {
view.scrollBy(lastPoint.subtract(view.center));
lastPoint = view.center;
}
Here's a sketch on paper.js
Sorry, May be my tone is not good,
Question:
I am using CSS3 code of opacity background like this
Edit: (adding code)
CSS:
opecity {
opacity:.75;
content:('Hello');
background:#111 url(../img/view.png) no-repeat center;
}
.opecity img:hover{
-moz-opacity: 0.10;
opacity: 0.10;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
background:#000;
}
HTML:
<div class="opecity">
<a class="example-image-link" href="img/port1.png" data-lightbox="example-1">
<img class="example-image" src="img/port1.png" alt="thumb-1" width="250" height="220"/>
</a>
</div>
This code display image only, but not display content 'Hello'. But I want to display image and content together at the same time. I also concern with this
Stackoweflow.com question.
Image and text with opacity background in the same DIV
But I don't get solution.
First line, You've opecity { and you should use .opecity because it's a class.
Separate the Content and place it in his own .classs {}
I.E:
.example-image-link:hover:after {
content:'Hello';
}
It wont work if you use it before or after the image class (Try This)
<\div class="opecity">
<\a class="example-image-link" href="img/port1.png"
data-lightbox="example-1"> <\img class="example-image"
src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg"
alt="thumb-1" width="250" height="220"/> </div>
.example-image-link:hover:after { content:'Hello'; }
remove the \ and change .example-image-link:hover:after for img:hover:after
The link that you posted they used another method:
try this:
<!DOCTYPE html>
<html>
<body>
<style>
div{
position: relative;
}
span{
background: rgba(0,0,0,0.5);
position: absolute;
bottom: 0;
left: 0;
padding: 6px;
display: block;
}
</style>
<div>
<span>Title</span>
<img src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg" />
</div>
</body>
</html>
(I took it from your link)
you can test all the html and css here: http://jsfiddle.net/
from W3Schools: "The content property is used with the :before and :after pseudo-elements, to insert generated content."
Try
.opecity:after {
content:'Hello';
}
My page has a resolution of 800x480. It has been designed as such. Now in Firefox (I have control over the viewers machine), I want to zoom the whole screen to 800x600. I know that there is a zoom option, but that does it proportionally (e.g. 150%). Is it possible to somehow to only stretch the 480 to 600 (a sort of a zoom).
I have a valid reason to do this and am aware of the aspect ratio issues that could arise.
Thank you for your time.
You can do this in Firefox 3.5 (Gecko 1.9.1) using CSS3 2d transforms.
Here's an example with two DIVs where the second is stretched from 800x480 to 800x600.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
background-color: #000;
color: #fff;
}
.viewport
{
width: 800px;
height: 480px;
background-color: gold;
color: #000;
position: absolute;
left: 0px;
top: 0px;
}
.stretched
{
background-color: rgba(255, 0, 0, 0.5);
-moz-transform: scaleY(1.25);
-moz-transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="viewport"><button>Normal</button></div>
<div class="viewport stretched"><br><br><button>Stretched</button></div>
</body>
</html>
See also:
Using CSS transforms
You can use:
self.resizeTo(width, height);
Although I think Firefox has a default setting in the preferences which prevents this from working.