FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Zur Registrierung

Thema: Scrollen- Fly - In Effekt jQuery? vom 28.12.2012

	MGi Foren-Übersicht -> Programmierung -> Scrollen- Fly - In Effekt jQuery?

Autor

Nachricht

JoeMelRamos
Threadersteller

Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: Männlich

Verfasst Fr 28.12.2012 22:11
Titel

Scrollen- Fly - In Effekt jQuery?

HILFE !
wollt nen Scroll Effekt mit jQuery erstellen, sitze wieder mal stunden dran trotz i-net, nichts gefunden.

Kann mir vielleicht einer sagen wie ich das einbinde? Diesen Effekt? Was brauche ich? Was mache ich falsch?

Wäre über jede Antwort dankbar. * Ich geb auf... *

Codes:

HTML

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sükrü Kulaber</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="../../js/jquery-1.8.2.min.js"></script>
<script src="../../js/jquery.scrollTo-1.4.3.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.parallax-1.1.js"></script>
<script src="../../js/jquery.easing.1.3.js"></script>
<script src="../../js/jquery.scrollorama.js"></script>
<script src="../../js/jquery.scrolldeck.js"></script>
<script src="../../js/jquery.lettering-0.6.1.min.js"></script>
<script src="../../js/jquery.scrollorama.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$('#nav').localScroll(800);

RepositionNav();

$(window).resize(function(){
   RepositionNav();
});

//.parallax(xPosition, adjuster, inertia, outerHeight) options:
//xPosition - Horizontal position of the element
//adjuster - y position to start from
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#intro').parallax("50%", 0, 0.1, true);
$('#second').parallax("50%", 0, 0.1, true);
$('.bg').parallax("50%", 2500, 0.4, true);
$('#third').parallax("50%", 2750, 0.3, true);

var deck = new $.scrolldeck({
   slides: '.slide',
   buttons: '#nav li a',
   easing: 'easeInOutExpo'
});

})
</script>
</head>

<body>
<ul id="nav">
   <li><a href="#intro" title="Next Section"></a></li>
   <li><a href="#second" title="Next Section"></a></li>
   <li><a href="#third" title="Next Section"></a></li>
   <li><a href="#fifth" title="Next Section"></a></li>
</ul>

<div id="intro" class="slide">
   <div class="story">
   <div class="float-left">
      <h2>HERZLICH | WILLKOMMEN</h2>
   <p>NEUGIER GEWECKT?<br>Entspannen Sie sich und genießen Sie.</p>
   </div>
   </div> 
</div> 

<div id="second" class="slide">
   <div class="story"><div class="bg"></div>
   <div class="float-right">
   <h2>Überschrift 2</h2>
   <p>Hier können Sie sich ein erstes Bild machen, was meine Refenze betrifft.</p>
   <p>Von A wie Analyse bis Z wie Zielgruppe.</p>
   </div>
   </div> 

</div> 

<div id="third" class="slide">

<div class="scrollblock" id="examples-transition">
   <h2>Transitions</h2>
   <h3 id="fade-in">Deine Mudderrrrr</h3>
   <h3 id="fly-in">DEINE Ommmmmaaa!</h3>


</div>
   <div class="story">

   <div class="float-left">
   <h2>Damit Ihre potentielle Zielgruppen sich angesprochen fühlen...</h2>

   <p>Optimieren und platzieren wir Ihre Werbung an die bestmögliche Stelle.</p>
   </div>

   </div> 
</div> 

<div id="fifth" class="slide">
   <div class="story">
   <h2>Kontaktieren Sie.</h2>
   <p>Und wir finden den gemeinsamen Nenner.</p>

      <p>Egal ob Telefon, E-Mail, Post oder Live.</p>

   </div> 
</div> 

<script type="text/javascript">

   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-2821890-9']);
   _gaq.push(['_trackPageview']);

   (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();

</script>
</body>
</html>

CSS

Code:

@charset "utf-8";
/* CSS Document */

body{
margin: 0;
min-width: 980px;
padding: 0;
}

p{
margin: 0 0 20px 0;
}

p, ul{
font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size-adjust:0.488;
font-weight:200;
font-style:normal;
}

img{
border: 0;
}

h1{
font-family:"Museo 900", Verdana, serif;
font-size-adjust:0.40;
font-weight: bolder;
font-style:normal;
}

h2{
font-family:"Beau Sans Pro Book", Verdana, sans-serif;
font-size-adjust:0.531;
font-weight:500;
font-style:normal;
}

#header h1{
color: #48941A;
}

.float-left{
float: left;
margin: 0 0 0 20px;
font-weight:bolder;
}

.float-right{
float: right;
margin: 0 20px 0 0;
}

.center{
font-size: 2.5em;
padding: 80px 0 0 0;
text-align: center;
}

#nav{
list-style: none;
position: fixed;
right: 30px;
z-index: 999;
}

#nav li{
margin: 0 0 15px 0;
}

#header, #intro, #second{
width: 100%;
}

#intro{
background:url(images/firstBG.jpg) 50% -75px no-repeat fixed;
color: white;
height: 800px;
margin: 0 auto;
padding: 160px 0 0 0;
}

#second{
background: url(images/secondBG.jpg) 50% 0 no-repeat fixed;
color: black;
height: 1200px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}

#second .bg{
background: url(images/trainers.png) 50% 0 no-repeat fixed;
height: 1300px;
margin: 0 auto;
padding: 0;
position: absolute;
width:1000px;
z-index: 200;
}

#third{
background-color: #999;
color: white;
height: 750px;
padding: 100px 0 0 0;
}

#fifth{
background: url(images/forthBG.jpg) 50% 0 no-repeat fixed;
height: 400px;
color:white;
margin: 0 auto;
padding: 40px 0 0 0;
}

.story{
margin: 0 auto;
min-width: 980px;
overflow: auto;
width: 980px;
}

.story .float-left, .story .float-right{
padding: 100px 0 0 0;
position: relative;
width: 350px;
}

.slide {
width: 100%;
}

#nav li a {
display: block;
width: 15px;
height: 15px;
border-radius: 15px;
background-color: white;
border: solid 2px white;
color:white;
}

#nav li a.current {
background-color: black;
}

#examples-transition {
overflow: hidden;
}

jQuery-Parallax

Code:

//function that places the navigation in the center of the window
function RepositionNav(){
var windowHeight = $(window).height(); //get the height of the window
var navHeight = $('#nav').height() / 2;
var windowCenter = (windowHeight / 2);
var newtop = windowCenter - navHeight;
$('#nav').css({"top": newtop}); //set the new top position of the navigation list
}

(function( $ ){
$.fn.parallax = function(xpos, adjuster, inertia, outerHeight) {

function inView(pos, element){

element.each(function(){ //for each selector, determine whether it's inview and run the move() function

   var element = $(this);
   var top = element.offset().top;

   if(outerHeight == true){
      var height = element.outerHeight(true);
   }else{
      var height = element.height();
   }

   //above & in view
   if(top + height >= pos && top + height - windowHeight < pos){
      move(pos, height);
   }

   //full view
   if(top <= pos && (top + height) >= pos && (top - windowHeight) < pos && top + height - windowHeight > pos){
      move(pos, height);
   }

   //below & in view
   if(top + height > pos && top - windowHeight < pos && top > pos){
      move(pos, height);
   }
});
}

   var $window = $(window);
   var windowHeight = $(window).height();
   var pos = $window.scrollTop(); //position of the scrollbar
   var $this = $(this);

   //setup defaults if arguments aren't specified
   if(xpos == null){xpos = "50%"}
   if(adjuster == null){adjuster = 0}
   if(inertia == null){inertia = 0.1}
   if(outerHeight == null){outerHeight = true}

   height = $this.height();
   $this.css({'backgroundPosition': newPos(xpos, outerHeight, adjuster, inertia)});

   function newPos(xpos, windowHeight, pos, adjuster, inertia){
      return xpos + " " + Math.round((-((windowHeight + pos) - adjuster) * inertia)) + "px";
   }

   //function to be called whenever the window is scrolled or resized
   function move(pos, height){
         $this.css({'backgroundPosition': newPos(xpos, height, pos, adjuster, inertia)});
   }

   $window.bind('scroll', function(){ //when the user is scrolling...
      var pos = $window.scrollTop(); //position of the scrollbar
      inView(pos, $this);

      $('#pixels').html(pos);
   })
}

})( jQuery );

JQuery easing

Code:

// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
   //alert(jQuery.easing.default);
   return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
   return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
   return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
   if ((t/=d/2) < 1) return c/2*t*t + b;
   return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
   return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
   return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
   if ((t/=d/2) < 1) return c/2*t*t*t + b;
   return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
   return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
   return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
   if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
   return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
   return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
   return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
   if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
   return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
   return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
   return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
   return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
   return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
   return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
   if (t==0) return b;
   if (t==d) return b+c;
   if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
   return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
   return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
   return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
   if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
   return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
   var s=1.70158;var p=0;var a=c;
   if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
   if (a < Math.abs(c)) { a=c; var s=p/4; }
   else var s = p/(2*Math.PI) * Math.asin (c/a);
   return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
   var s=1.70158;var p=0;var a=c;
   if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
   if (a < Math.abs(c)) { a=c; var s=p/4; }
   else var s = p/(2*Math.PI) * Math.asin (c/a);
   return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
   var s=1.70158;var p=0;var a=c;
   if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
   if (a < Math.abs(c)) { a=c; var s=p/4; }
   else var s = p/(2*Math.PI) * Math.asin (c/a);
   if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
   return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
   if (s == undefined) s = 1.70158;
   return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
   if (s == undefined) s = 1.70158;
   return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
   if (s == undefined) s = 1.70158;
   if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
   return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
   return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
   if ((t/=d) < (1/2.75)) {
      return c*(7.5625*t*t) + b;
   } else if (t < (2/2.75)) {
      return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
   } else if (t < (2.5/2.75)) {
      return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
   } else {
      return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
   }
},
easeInOutBounce: function (x, t, b, c, d) {
   if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
   return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});

/

JQuery Scrollorama

Code:

JQuery Scrolldeck

Code:

HILFFEEEEEEEEEE !!!!! * Ich geb auf... *

UND DANKE

ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich

Verfasst Fr 28.12.2012 23:15 Titel

Was heißt "Scrolleffekt"? Was funktioniert nicht? Was hast Du schon versuchst?

Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich

Verfasst Sa 29.12.2012 07:52 Titel

Durch den Code wird sich niemand durchquälen wollen, stelle eine Demo-Seite online. Btw. Was sagt die JS-Konsole? Gruß Karl

DaMiGGe

Dabei seit: 30.09.2008
Ort: Schwerin
Alter: 35
Geschlecht: Männlich

Verfasst Mi 02.01.2013 13:38
Titel

Zitat:

Durch den Code wird sich niemand durchquälen wollen, stelle eine Demo-Seite online.

Wenn es lediglich ein einfaches "to-top" scrollen im Fußbereich sein soll, empfehle ich das hier:

Code:

$('a.top').click(function(){
   $('body,html').animate({
               scrollTop: 0
            }, 800);
            return false;
});

irgendwo am Fußende steht dann der a-Tag mit der Klasse "top"

---

Ansonsten kannst du das ja auch für deine Zwecke benutzen, oder?
jQuery setze ich jetzt mal voraus?


	MGi Foren-Übersicht -> Programmierung

Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.