Bild-Einblendung bei Belichtung

Question

Wie blende ich ein Bild ein, sobald es angezeigt wird? Ich versuche, meine Website ansprechbar zu machen, so dass es nicht ausreicht, die Anzahl der gescrollten Pixel einzublenden. Ich brauche es abhängig von der Prozentzahl gescrollt. Oder wenn es einen Weg gibt, es einzublenden, wenn es im Sichtfeld ist?

Hier ist der Code:

$(document).ready(function(){ 
    $(window).bind("scroll", function() { 
if ($(this).scrollTop() > 300) { 
    $("#bluprintdesign").fadeIn(); 
} else { 
    $("#bluprintdesign").stop().fadeOut(); 
} 

Gerade jetzt, was ich los ist es blendet, wenn 300px gescrollt und ausblendet, wenn Sie wieder nach oben scrollen. Ich mag das, aber ich möchte es in Prozenten, damit es auf alle Bildschirmauflösungen reagiert.

Vielen Dank!

Answer 1

Hier ist eine Funktion, die showImages() Ihren $.scrollTop() + $(window).height() misst den Scroll-Punkt des Bodens des Ansichtsfensters zu etablieren, und eine Klasse, um versteckte Bilder hinzufügen, wenn die Hälfte des Bildes mit der Unterseite des Darstellungs bestanden hat. Ich rufe es unter $(document).ready(); und $(window).on('scroll'); an, damit es Bilder im Bildfenster beim Laden der Seite und beim Bildlauf lädt.

Mit opacity: 0 statt display: none (was $.fadeIn()/$.fadeOut() wechseln) ermöglicht das Bild noch Platz im Dokument aufnehmen, so dass Sie es Höhe berechnen (mußte wissen, wenn die Hälfte des Bildes sichtbar ist) verzichten müssen etwas knifflig, und wird auch das Seitenlayout beibehalten, wenn das Bild eingeblendet wird, im Gegensatz zu der Seite herumspringen, wenn Sie display umschalten.

Es gibt auch Bibliotheken, die dies für Sie tun. jQuery waypoints ist eine beliebte.

function showImages() { 
 
    var $window = $(window), 
 
    thresh = $window.scrollTop() + $window.height(); 
 
    $('img:not(.show)').each(function() { 
 
    if (thresh > $(this).offset().top + ($(this).outerHeight()/2)) { 
 
     $(this).addClass('show'); 
 
    } 
 
    }); 
 
} 
 
$(window).on('scroll', function() { 
 
    showImages(); 
 
}) 
 
$(function() { 
 
    showImages(); 
 
})

section { 
 
    height: 200vh; 
 
    border-top: 1px solid black; 
 
} 
 
img { 
 
    opacity: 0; 
 
    transition: opacity .25s; 
 
} 
 
.show { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
</section> 
 
<section> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
</section> 
 
<section> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
</section>