smooth scrolling

Status
Niet open voor verdere reacties.
F

Foxhead

Gebruiker
Lid geworden
27 nov 2016
Berichten
17
Ik ben op zoek naar een simpele tutorial of uitleg dat het volgende doet:
De achtergrond van een website trager laten scrollen dan de inhoud van de pagina.
Ik heb al veel tutorials bekeken, maar deze zijn veel te complex.
 
Als ze allemaal te complex zijn ga je geen simpelere vinden. Dat blijkt ook uit het feit dat er nog geen antwoord is gepost. Komt trouwens ook door dat je wat weinig info plaatst. Vertel even wat je al weet, wat je bekeken hebt (en waarom het te complex is?) en laat je code eens zien. De ene website is de andere niet, immers.
 
Venga zei:
Als ze allemaal te complex zijn ga je geen simpelere vinden. Dat blijkt ook uit het feit dat er nog geen antwoord is gepost. Komt trouwens ook door dat je wat weinig info plaatst. Vertel even wat je al weet, wat je bekeken hebt (en waarom het te complex is?) en laat je code eens zien. De ene website is de andere niet, immers.
Klik om te vergroten...
 
Een vb: ik heb een achtergrond op de body en een H1 div. De achtergrond heeft nu de instelling FIXED zodat deze niet mee gaat scrollen met de H1 div. Ik zou graag hebben dat de achtergrond wel mee scrolt, maar trager dan de H1 div. Een parallax effect zeg maar. Als ik zoek op internet kom ik enkel ingewikkelde parallax websites tegen met diverse scripts. Ik zoek een makkelijkere oplossing met vb: enkel CSS. Ik hoop dat ik nu wat duidelijker was.
 
Maar, wat is er mis met een Javascriptje?

Voor zover ik weet zul je hier echt JavaScript bij moeten gebruiken, en gaat het niet alleen met CSS lukken.
 
Met Javascript is er niets mis. Ik heb de kennis niet van programmeren met Javascript. Weet er iemand waar ik een voorbeeld kan vinden van zo een script???
 
Maar wat is er mis met die tutorials? Zie ook Venga's bericht.
 
Ja, dat is mijn vraag.
 
Hier een voorbeeld van mijn code:
De HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Naamloos document</title>
<link href="Stijlen/forum parallax.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>Foxhead</h1>

<footer>dit is mijn footer</footer>
</body>
</html>
------------------------------------------------------
De CSS code:
@charset "utf-8";
body {
background-image: url(../Afbeeldingen/achtergrond.jpg);
}
h1 {
color: #FFFFFF;
margin-top: 206px;
text-align: center;
}
footer {
margin-top: 651px;
}
---------------------------------------------
Bedoeling is dat de achtergrond trager scrolt dan de h1. Nu gaan de 2 elementen even snel scrollen.
Als ik de achtergrond op FIXED zet blijft de achtergrond staan, wat logisch is natuurlijk.

Ik ben echt nog maar een groentje in de wereld van web development. Ik heb nog maar 2 website's op mijn naam staan.
www.grandbru.be
www.herberggrandbru.be
 
Het is een trend die vanzelf weer overgaat denk ik. Met puur css gaat het niet omdat er veel en snel gerekend moet worden. Met een klein eenvoudig script (hieronder) zoals je vraagt heb je de beperking dat het niet op elke tablet/smartphone werkt. Grotere kant-en-klare scripts doen dit wel goed op verschillende browsers.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>smooth parallax</title>
<style>
body {
  margin: 0;
  background-image: url("achtergrond.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;
}
</style>
</head>
<body>
-Hier staat heel veel content-
<script type="text/javascript">
//luister naar een scroll event en doe dan de function
window.addEventListener("scroll", function(){
  //hoeveel pixels is er gescrolld, deel dit door 2
  var Y = window.pageYOffset / 2;
  //wijzig de background-position naar nieuwe Y
  document.body.style.backgroundPosition = "0 -" + Y + "px";
});
</script>
</body>
</html>

**edit
Het css voorbeeld wat je geeft is uitgegaan van Chrome en niet van andere browsers.
Het werkt niet op Internet Explorer, Edge, iPhone en iPad.
Op Firefox pas sinds versie 51, en op Android sinds versie 5.3
Vandaar dat Javascript de enige oplossing kan bieden.

Suc6. Have fun.
 
Laatst bewerkt:
@Bron. jij ook bedankt voor het meedenken.
Je code werkt perfect op mijn website die ik aan het ontwerpen ben.

Ik hou wel in gedachte dat het mogelijk niet werkt op tablet/smartphone.
 
@Bron
Het css voorbeeld werkt idd niet op Internet Explorer. Deze optie gaat de prullenbak in.

Jou klein script werkt wel perfect in mijn Dreamweaver en bij voorvertoning/realtime voorvertoning in de browsers chrome en IE.

HELAAS Als ik de pagina synchroniseer met de server werkt het niet meer. Als ik in de browser kijk naar de pagina bron zie ik het script helemaal niet.
Heb je daar nog een oplossing voor??? Of moet ik gewoon dringend gaan studeren voor javascript :)
 
Dan zal er een verwijzing niet kloppen?
 
@php4u
De TS zei dat het werkt, alleen niet na uploaden omdat dan het script weg is.

@foxhead
Omdat ik altijd uit ga van optimale performance zet ik scripts onderaan in de body. In jouw geval kun je het script in de head zetten
Code: 
.....
<style>
body {
  margin: 0;
  background-image: url("achtergrond.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;
}
</style>
<script type="text/javascript">
//luister naar een scroll event en doe dan de function
window.addEventListener("scroll", function(){
  //hoeveel pixels is er gescrolld, deel dit door 2
  var Y = window.pageYOffset / 2;
  //wijzig de background-position naar nieuwe Y, waarde X blijft 0
  document.body.style.backgroundPosition = "0 -" + Y + "px";
});
</script>
</head>
.....
 
Laatst bewerkt:
@Ron en PHP4U:

Ik ben nog een stapje verder gegaan en het script in een aparte pagina gezet met extentie .js
Die pagina gelinkt aan de html en alles werkt perfect.
Bij het testen op mijn tablet werkte het zoals je al zei niet zo goed. maar daar kan ik voorlopig mee leven.

Enorm bedankt voor jullie hulp.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan