i've designed myself a parallax website as i thought it would be fun but when i take it away from my desktop on to a laptop i have to zoom out by around 50% in order for it to display correctly.
I can't seem to quite figure out how to "shrink" the page in relation to the resolution but i'm sure there must be a way - any help would be hugely appreciated
$(document).ready(function(){
$('.curtains').curtain();
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#start h1',{
duration:800, property:'zoom', end:20
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#start h2',{
duration:800, property:'left', end: 1260
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#ans h1',{
duration:1600, property:'left', end: 75
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#ans h2',{
duration:1600, property:'left', end: 1400
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#ans p',{
delay: 600, duration: 300, property:'opacity', start:0
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#ans a',{
delay: 600, duration: 300, property:'opacity', start:0
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#one h1',{
duration:790, delay: 1100, property:'left', end: 0
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#one h2',{
duration:1400, delay: 1100, property:'left', end: 600
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#one h3',{
duration:1400, delay: 1100, property:'left', end: 350
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#one p',{
delay: 1250, duration: 300, property:'opacity', start:0
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#one a',{
delay: 1250, duration: 300, property:'opacity', start:0
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#everest h1',{
duration:1200, delay: 1900, property:'left', end: 1000
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#everest h2',{
duration:1500, delay: 1900, property:'left', end: 850
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#everest h3',{
duration:1500, delay: 1900, property:'left', end: 250
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#about h1',{
duration:1500, delay: 2200, property:'top', end: 200
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#about h1',{
duration:1500, delay: 2200, property:'left', start: 1100, end: 1100
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#about p',{
delay: 2300, duration: 1500, property:'opacity', start:0
});
});
$(document).ready(function(){
$('.curtains').curtain();
var scrollorama = $.scrollorama({
blocks:'.curtains'
});
scrollorama.animate('#about p',{
duration:1500, delay: 2200, property:'left', start: -200, end: 200
});
});body {
font-family: 'Roboto', Arial, Helvetica, calibri;
}
section {
overflow: hidden; height: 993px;
}
#start {
background: #c3c2c1 url(images/slide1.jpg);
background-size: cover;
}
#start h1 {
width: 1600px; height: 230px;
background: url(images/slide1-2.png); text-indent: -9999px;
position: fixed; top: 550px; left: 150px;
}
#start h2 {
width: 715px; height: 934px;
background: url(images/slide1-3.png); text-indent: -9999px;
position: fixed; top: 50px; left: 600px;
}
#start h3 {
width: 829px; height: 125px;
background: url(images/slide1-4.png); text-indent: -9999px;
position: fixed; top: 800px; left: 525px;
}
#ans {
background: #c3c2c1 url(images/slide2.jpg);
background-size: cover;
}
#ans h1 {
width: 960px; height: 540px;
position: absolute; top: 70px; left: 250px;
box-shadow: 5px 5px 50px #000000;
}
#ans h2 {
width: 685px; height: 399px;
background: url(images/slide2-1.png); text-indent: -9999px;
position: absolute; top: 500px; left: 700px;
}
#ans p {
position: relative; top: 150px; left: 1200px;
width: 508px; margin: 0 0 30px 0;
font-size:20px;
color: #000000;
}
#ans a {
position: relative; top: 475px; left: 489px;
}
#one {
background: #c3c2c1 url(images/slide3.jpg);
background-size: cover;
}
#one h1 {
background: url(images/slide3-1.png); text-indent: -9999px;
width: 1600px; height: 993px;
position: absolute; top: 25px; left: -800px;
}
#one h2 {
width: 960px; height: 540px;
position: absolute; top: 250px; left: 1100px;
}
#one h3 {
background: url(images/slide3-2.png); text-indent: -9999px;
width: 620px; height: 316px;
position: absolute; top: 75px; left: -200px;
}
#one p {
position: relative; top: 450px; left: 100px;
width: 600px; margin: 0 0 30px 0;
font-size:20px;
color: #ffffff;
}
#one a {
position: relative; top: 475px; left: 300px;
}
#everest {
background: #c3c2c1 url(images/slide4.jpg);
background-size: cover;
}
#everest h1 {
background: url(images/slide4-1.png); text-indent: -9999px;
width: 551px; height: 426px;
position: absolute; top: 30px; left: 1100px;
}
#everest h2 {
background: url(images/slide4-2.png); text-indent: -9999px;
width: 931px; height: 676px;
position: absolute; top: 300px; left: 1100px;
}
#everest h3 {
width: 960px; height: 540px;
position: absolute; top: 300px; left: -50px;
box-shadow: 5px 5px 50px #000000;
}
#everest p {
position: relative; top: 800px; left: 100px;
width: 550px; margin: 0 0 30px 0;
font-size:20px;
color: #ffffff;
}
#about {
background: #c3c2c1 url(images/slide5.jpg);
background-size: cover;
}
#about h1 {
background: url(images/slide5-1.png); text-indent: -9999px;
width: 532px; height: 438px;
position: absolute; top: 1300px; left: 800px;
}
#about p {
position: relative; top: 300px; left: 250px;
width: 750px; margin: 0 0 30px 0;
font-size:20px;
color: #000000;
}
#end {
background: #c3c2c1 url(images/slide6.jpg);
background-size: cover;
}<!DOCTYPE html>
<html>
<head>
<meta name="google-site-verification" content="8egGDT2xCm_Cuqug3jvPF5D_YzUUZUnkfelkX34VSaI" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TennentSpace</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-50123314-1', 'tennentspace.co.uk');
ga('send', 'pageview');
</script>
<link type='text/css' rel='Stylesheet' href='http://fonts.googleapis.com/css?family=Titillium+Web:300,400'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<link href="style.css" rel="stylesheet"/>
<link rel="shortcut icon" href="images/favicon.ico" >
<link href="js/curtain.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/curtain.js"></script>
<script src="js/jquery.scrollorama.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<ul class="curtains">
<li>
<section id="start">
<h2>Jake Tennent</h2>
<h3>Logos</h3>
<h1>TennentSpace</h1>
</section>
</li>
<li>
<section id="ans">
<h1><iframe width="960" height="540" src="https://www.youtube.com/embed/videoseries?list=PLopABDoIy7cyxwYOX9cDGZrmmON71tm5W" frameborder="0" allowfullscreen></iframe></h1>
<h2>The Alternative News Show</h2>
<p>When was the last time you had fun watching the news - exactly! And that's what TennentSpace is here to change with <b>The Alternative News Show</b>.</p>
<p>Every Monday at 6pm we round up all the news the main stream media missed and if you're not smiling by the end of it, we'll give you your frown back.</p>
<p>Whether its news of a naked boxing match or a prank gone wrong we've got you covered so subscribe to the channel and have fun watching the news!</p>
<a href=""><img src="images/sub.png" onmouseover="this.src='images/sub1.png'" onmouseout="this.src='images/sub.png'" /></a>
</section>
</li>
<li>
<section id="one">
<h1>Red Background</h1>
<h2><iframe width="960" height="540" src="https://www.youtube.com/embed/videoseries?list=PLopABDoIy7cwMP5uxW5jh4gBzSVn9bw8e" frameborder="0" allowfullscreen></iframe></h2>
<h3>One Minute Movie Reviews</h3>
<p>Now the news has you smiling again the last thing you want to do is watch a dud film and we can help with that!</p>
<p>Our One Minute Movie Review will give you the lowdown on the latest release and if the crazy ticket price is really worth it.</p>
<p>Plus we'll only take up one minute of your time in the process so you can decide whilst in the queue, then turn off your phone - don't be that guy! </p>
<a href=""><img src="images/subw.png" onmouseover="this.src='images/subw1.png'" onmouseout="this.src='images/subw.png'" /></a>
</section>
</li>
<li>
<section id="everest">
<h3><iframe width="960" height="540" src="https://www.youtube.com/embed/k9fUSCI6Y_Y?list=PLopABDoIy7czSu-DdEEhZpHaazLS6W603" frameborder="0" allowfullscreen></iframe></h3>
<h1>Everest Base Camp</h1>
<h2>Jake Tennent</h2>
</section>
</li>
<li>
<section id="about">
<h1>1234</h1>
<p>TennentSpace started way back in 2013 with one man and a need to make people smile. Since then it's grown into what it is today - a slightly older man with a need to make people smile.</p>
<p>The channel that started life out in my bedroom is now home to The Alternative News Show, One Minute Movie Reviews, The Everest Base Camp Trek and so much more but it still has one very simple aim: <strike>Make A Shed Load Of Cash</strike> </p>
<p><b>Make People Smile!</b></p>
<p>Because when was the last time you had fun watching the news and when was the last time you saw a fully grown man paint a canvas with his boob - if it's never it's too soon.</p>
<p>Subscribe to TennentSpace and join us every week as we produce fun, entertaining content that no one ever asked for. Even if we don't make you smile you'll definitely leave with a weird news story to tell at the dinner table - like the one about Canada's inflatable space tower!</p>
</section>
</li>
<li>
<section id="end">
<h1>1234</h1>
</section>
</li>
</ul>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire