const gulp = require('gulp');
const es = require('event-stream');
gulp.task('move:img', (cb) => {
let mdpi = gulp.src('./img/**/*_mdpi.png')
.pipe(gulp.dest('./dist/mdpi'));
let hdpi = gulp.src('./img/**/*_hdpi.png')
.pipe(gulp.dest('./dist/hdpi'));
let xhdpi = gulp.src('./img/**/*_xhdpi.png')
.pipe(gulp.dest('./dist/xhdpi'));
return es.concat(mdpi, hdpi, xhdpi);
}
<div class="box">
<img src="iphone.png" alt="">
</div>
<div class="next-box"></div>
.box {
overflow: hidden;
}
.box img {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
}
.next-box {
position: relative;
}
.next-box:before {
content: "";
display: block;
width: 60px;
height: 60px;
background: #28c8c6 url(down-icon.png) no-repeat 20px 10px;
border-radius: 100%;
position: absolute
top: -30px;
left: 50%;
transform: translateX(-50%);
}
Я так понял ему не нравятся ординарные ковычки
style="transform: translate3d(-695.182px, 0px, 0px);
let translate3D = (x = 0, y = 0, z = 0, el = "px") => { return `translate3D(${x}${el}, ${y}${el}, ${z}${el})` };
let imgObj = document.querySelector("#someIMG");
let onScroll = (dy = 0, mult = 1) => { imgObj.style.transform = translate3D(dy * mult); }
// и само событие onScroll естественно