ホバー上の画像スクロール

Question

div内の画像をホバー上にスクロールダウンしたいです。そして、その部分は働いています。

また、画像が長くなり、そのためにトランジションの内部でcalcを使用しようとしていたため、スクロールが長くなるようにする必要がありますが、動作しません。

HTML

<div class="preview"> 
    <div class="previewimg"></div> 
</div> 

CSS私もそれを使用することができ、これを行うために他のいくつかのより良い方法があれば

.preview { 
position: relative; 
width: 75%; 
height:90vh; 
overflow: hidden; 
border:1px solid red; 
background-color: transparent; 
} 
.previewimg { 
width: 100%; 
height: 100%; 
top:0; 
background-image: url(https://www.n2odesigns.com/wp- 
content/uploads/Projema-Website-Preview-2016.jpg); 
background-repeat: no-repeat; 
background-size: 100% auto; 
background-position-y: 0; 
transition:all calc(0.02s * height) ease-in-out; 
} 
.previewimg:hover { 
background-position-y: 100%; 
height: 100%; 
transition:all calc(0.02s * height) ease-in-out; 
} 

：

は、ここに私のコードです。 ご協力いただきありがとうございます！

Answer 1

これを行うには、高さの機能に基づいてこの移行時間を行うには、背景画像ではなく画像である必要があります。下記のコードを使用してください。

$('.previewimg').css("transition", "transform " + 0.02 * $('.previewimg').height() + "s ease");

.preview { 
 
    position: relative; 
 
    width: 75%; 
 
    height: 300px; 
 
    overflow: hidden; 
 
    border: 1px solid red; 
 
    background-color: transparent; 
 
} 
 

 
.preview .previewimg { 
 
    width: 100%; 
 
    height: auto; 
 
    transform: translateY(0px); 
 
} 
 

 
.preview:hover .previewimg { 
 
    transform: translateY(calc(-100% + 300px)); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="preview"> 
 
    <img class="previewimg" src="https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg"/> 
 
</div>

Answer 2

あなたは、ここに解決策として、JSを受け入れている場合は、あなたのHTML/CSSの構造を変更することなく、追加することができますコードです：

function getHeight(url) { 
 
    console.log(url); 
 
    var img = new Image(); 
 
    img.src = url; 
 
    return 0.002*parseInt(img.height); 
 
} 
 
var e =$(".previewimg"); 
 
var tr = "all "+getHeight(e.css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'))+"s ease-in-out"; 
 
console.log(tr); 
 
e.css('transition',tr);

.preview { 
 
    position: relative; 
 
    width: 75%; 
 
    height: 90vh; 
 
    overflow: hidden; 
 
    border: 1px solid red; 
 
    background-color: transparent; 
 
} 
 

 
.previewimg { 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    background-image: url(https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% auto; 
 
    background-position-y: 0; 
 
} 
 

 
.previewimg:hover { 
 
    background-position-y: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="preview"> 
 
    <div class="previewimg"></div> 
 
</div>