About:
Finished a very basic Parallax Scrolling effect tutorial with jQuery. The effect works as it should.
My issue:
Content allready overlaps the background image when first viewing the page by a certain amount of pixels. This needs to start right below the viewport (and thus, background image).
My question: What exactly do I need to change (or add) in order to make it start below the background image?
My attempts to resolve:
Tried setting a fixed height of 100% to the background in order to have the content part start out of sight (below the background image). This removed my background as a whole and pushed the content further upwards.
Tried changing .content height from 1500px to lower or higher. This is not ideal, unfortunately.
Tried changing .parallax-bg padding from 300px to higher in order to push the content down. It works, but I am not certain wether this works on different resolutions.
My coding:
(function() {
var documentEl = $(document),
parallaxBg = $('div.parallax-bg');
documentEl.on('scroll', function() {
var currScrollPos = documentEl.scrollTop();
parallaxBg.css('background-position', '0 ' + -currScrollPos/4 + 'px');
});
})();
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
.content {
height:1500px;
background-color:#333;
}
.parallax-bg {
padding:300px 0;
background-image:url('/img/bg.png');
background-size:cover;
background-attachment:fixed;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
transition:all 0.2s ease;
}
.parallax-bg h1 {
text-align:center;
text-transform:uppercase;
color:#fff;
font-size:70px;
font-family:arial:
}
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="content">
<div class="parallax-bg">
<h1>Hello Everybody</h1>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/scrolling.js"></script>
</body>
</html>
Related
My HTML/CSS/Js code is as follows:
let con = document.getElementById("container")
setTimeout(function(){
// while(con.hasChildNodes){
// con.removeChild(con.firstChild)
// }
con.style.display = "none"
},3 * 1000)
#container{
width: 100%;
height: 1080px;
background: #00ff00
}
.item{
width: 100px;
height: 200px;
background: #ff00ff;
animation: move 2s linear infinite;
}
#keyframes move{
0%{
transform: translateX(100px)
}
100%{
transform: translateX(200px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>page not refresh</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="js.js"></script>
</body>
</html>
In Chrome or firefox, the UI can be hidden 3 seconds later.
In Cobalt, the UI can't be hidden 3 seconds later.
If we remove the animation from the css file in Cobalt, the UI can be hidden 3 seconds later successfully.
How to hide the UI when there is animation on the page?
Cobalt renders only necessary area. If there is nothing to render, it does not do anything. In your case, there is no specified background color so there is nothing to update after hiding the item.
Setting the background color should fix the problem, as it means there is something to render - which is 'white' color - after hiding the item.
body {
background-color: white;
}
I have read this highly useful post which unfortunately did not resolve my question: How may I use code in the HTA to scale down (shrink) the entire contents of the window, text and boxes both, in an HTA file? I'm using IE11 (or, it uses me), and I need to Ctrl-Scroll to downsize the window content every time I open it.
Now, I added meta http-equiv="x-ua-compatible" content="ie=edge" as suggested in comments, but now that breaks the placement of the file at position 1920,0 . Is there a solution which will allow resizing AND allow me to place the window where I need it?
<html><title>A Form </title>
<meta http-equiv="x-ua-compatible" content="ie=edge" />.
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#365ebf', gradientType='0');">
<head>
<script language="JavaScript">window.resizeTo(320,1080);</script>
<style type="text/css">
body {
transform: scale(0.9);
height: 90%;
background-color: #EFEFDC;
font-family: Arial Narrow;
font-size: 12px;
color: #343421;
margin: 2px;
filter: none !important;
}
b {
font-size: 16px;
padding: 1en;
}
</style>
<SCRIPT Language="VBScript">
Sub Window_Onload
window.moveTo 1920, 0
End Sub
</SCRIPT>
I reread your question and your comments and I think I understand your requirements better. To programmatically increase the zoom level of all your controls use something similar to:
<script>
document.body.style.zoom = "200%"
</script>
Feel free to add this code anywhere, I tried it at the end of the script body and it worked for me:
<html>
<head>
<title>A Form</title>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
html {
height: 100%;
}
body {
-ms-zoom: 0.50;
background-image: linear-gradient(135deg, #C0CFE2, #365ebf);
}
</style>
</head>
<body>
What is your name?<p>
<input id="name" value="Luke"></input><p>
<input type="button" value="CLICK ME" onclick="alert('Obi-Wan says: Use the Force, ' + document.getElementById('name').value + '.')"><p>
</body>
<script>
window.moveTo(100, 300);
window.resizeTo(500, 300);
</script>
<script>
document.body.style.zoom = "200%"
</script>
</html>
So I plan on making this really long image, its small right now, but I increased the height out to how long I expected it to be. Here's my code so far:
<!doctype html>
<meta charset="utf-8">
<head>
<style>
body {background-color: black}
.image {background-image: url('http://i.imgur.com/JrsEkO9.jpg');
width: 640px;
height: 25000px;
position: absolute;
left: 50%;
top: 40%;
margin:-228px 0 0 -400px;
repeat-x: no;
-webkit-background-size: 640px 25000px;
min-width: 640px;
min-height: 25000px;}
</style>
</head>
<html>
<body>
<div class="image">
</div>
</html>
</body>
It looks like I was hoping it would on a desktop, but when opened on an ipad the image is fuzzy. Any suggestions? Here's a link to see the problem: http://bit.ly/HrG9oc
I should start by saying I'm relatively new to the likes of HTML/CSS. I have an image that is 2880x540 and I'm looking to set it as the landing page for a website. This means I need to have the image centered so that the excess width bleeds off the browser window, without having a scrollbar (the excess resolution is there for the likes of higher resolution monitors). I'm planning on using two regions of the image as rollovers for two other images that have the same proportions.
As of right now my code is very basic:
<!DOCTYPE html>
<head>
</head>
<body>
<img src="sitewide.png" width="2880" height="540" alt=""/>
</body>
</html>
Any feedback is greatly appreciated.
You can set your image as a centered background of a div:
<!DOCTYPE html>
<head>
<style>
body{
overflow-x: hidden;
}
#bigImage{
background:url('sitewide.png') no-repeat top center;
width: 2880px;
height: 540px;
}
</style>
</head>
<body>
<div id="bigImage"></div>
</body>
</html>
I am modifying the HTML5 port of the game Jump'n'Bump to run on Apple and Android-based mobile devices. I use a cheap 1 GHz Cortex-A8 Android 4.0.3 tablet for testing. I have encountered strange behaviour in the system's Browser. I normally get a very low frame-rate of about 1 FPS (entire screen is re-drawn every frame, setTimeout is used...). However, when I add a <div> which has a position:fixed CSS attribute before the <canvas> tag, the frame-rate skyrockets and the game becomes playable.
Could someone please explain this odd phenomenon? Are there some rendering modes in the Android Browser which influence canvas performance? Is this a cross-platform issue? How do I make sure the page works efficiently in the user's browser?
An outline of the code I'm working on:
<!DOCTYPE html>
<html>
<title>Jump'n'Bump - HTML5</title>
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<meta name="viewport" content = "width=400px, user-scaleable=no">
<!-- javascript files included here -->
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body { margin: 0px 0px 0xp 0px }
canvas { border: 0px solid black; }
img.resource { display:none; }
#fixed_div { position: fixed; width: 10px; height: 10px; left: 0px; top: 0px; }
#gameArea { position: absolute; left: 0px; top: 0px; width: 400px; height: 256px; background: red; }
canvas {
image-rendering: optimizeSpeed; // Older versions of FF
image-rendering: -moz-crisp-edges; // FF 6.0+
image-rendering: -webkit-optimize-contrast; // Webkit
image-rendering: optimize-contrast; // Possible future browsers.
-ms-interpolation-mode: nearest-neighbor; // IE
}
</style>
<body onload="init()" text="#FFFFFF" bgcolor="#000000">
<!-- image resources like this here: -->
<img class="resource" id='rabbits' src='rabbit.png'/>
<!-- *** remove the line below and the game slows down *** -->
<div id='fixed_div'></div>
<div id="gameArea"><canvas id="screen" width="400" height="256"></canvas></div>
</body>
</html>
This issue is so curious.
Try using Request Animation Frame instead of setInterval (without the magic div, =])
function getRequestAnimFrame() {
var game = this;
// requestAnim shim layer by Paul Irish
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / fps);
};
}
Maybe this help to increase the perform.