Javascript CSS ideas and code to implement image rolling shutter effect

Home

Web Front-end

JS Tutorial

Javascript CSS ideas and code to implement image rolling shutter effect_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:33 PM

image

Those who have used Arcgis must have a deep memory of the roller shutter effect in Arcmap, and want to move it to their own WebGIS system. With the same idea, I also like this relatively cool roller shutter. I did some research on the effect, hahaha, it’s out, I’ll report the results to everyone

Seeing this effect, did your chicken move a little bit? Hehe, don’t worry, listen to me slowly.

First, the container. Use two DIVs to display images from two different periods. Next set the styles of the two containers, code:

#after{ 
position: absolute; 
top: 0px; 
left: 0px; 
background-image: url(../images/24.jpg); 
width: 940px; 
height: 529px; 
background-repeat: no-repeat; 
} 
#before{ 
position: absolute; 
top: 0px; 
left: 0px; 
border-right: 3px solid #f00; 
background-image: url(../images/23.jpg); 
width: 433px; 
height: 529px; 
background-repeat: no-repeat; 
max-width: 940px; 
} 

Copy after login

In this way, the image is displayed on the web.

Next, implement the rolling shutter effect. To implement a rolling shutter, the most important thing is to set the width of before. How to set it is to get the position of the mouse. The code is as follows:

function RollImage(evt){ 
var x=evt.pageX; 
console.log(x); 
$("#before").css("width",x+"px"); 
} 
/script>

Copy after login

In this way, the effect of roller blinds is achieved. The source code is as follows:

style.css

.beforeafter{ 
width: 940px; 
height: 529px; 
} 
#after{ 
position: absolute; 
top: 0px; 
left: 0px; 
background-image: url(../images/24.jpg); 
width: 940px; 
height: 529px; 
background-repeat: no-repeat; 
} 
#before{ 
position: absolute; 
top: 0px; 
left: 0px; 
border-right: 3px solid #f00; 
background-image: url(../images/23.jpg); 
width: 433px; 
height: 529px; 
background-repeat: no-repeat; 
max-width: 940px; 
} 

Copy after login

test.html

<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head> 
<title>日本地震灾区前后对比</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="Content-Language" content="zh-CN"> 
<link href="css/roll.css" type="text/css" rel="stylesheet"> 
<script src="../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
function RollImage(evt){ 
<strong>var x=evt.pageX; 
$("#before").css("width",x+"px");</strong> 
} 
</script> 
</head> 
<body> 
<div class="beforeafter" onmousemove="RollImage(event)"> 
<div id="after"></div> 
<div id="before"> </div> 
</div> 
</body> 
</html>

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Dead Rails - How To Tame Wolves

3 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1655

CakePHP Tutorial

1413

Laravel Tutorial

1306

PHP Tutorial

1252

C# Tutorial

1226

Related knowledge

The same model as the flagship! Xiaomi Civi 4 Pro upgrades imaging brain 3.0: equipped with Xiaomi AISP Mar 22, 2024 pm 12:02 PM

According to news on March 21, Xiaomi Civi4Pro was officially released today, equipped with the original Leica professional triple camera and equipped with the Light Hunter 800 customized professional sensor. According to reports, Xiaomi Civi4Pro also inherits the strength of the flagship model and is equipped with Xiaomi AISP. Through Xiaomi's ThePaper OS, it goes deep into the hardware layer, reconstructs the technology pipeline, and goes deep into each module of the SoC to fully integrate the computing power of the CPU, GPU, NPU and ISP. The total computing power is as high as 42TOPS, and the continuous shooting speed is increased by 69%. At the same time, the new machine integrates four major computational photography models, cleverly integrating algorithms and optics to bring three-dimensional tones, realistic colors and movie-level layers. The new large portrait model also incorporates the new AIGAN beauty algorithm, which produces

iPhone 16 reveals all camera features: laying the foundation for Vision Pro? Jan 25, 2024 am 08:15 AM

At last year’s Apple autumn conference, the iPhone 15 Pro Max was definitely one of the most talked about protagonists simply because it was Apple’s first smartphone equipped with a periscope telephoto lens. Of course, the iPhone 15 Pro Max only supports up to 5x optical zoom, and due to the small sensor size, its performance in most scenes is slightly regrettable. (Source: Apple) In the Android camp, 1-inch outsole sensors have almost become standard equipment for flagship models. With the "outsole telephoto" trend blowing again in the high-end market in 2023, even in previous years, it was not too popular among manufacturers. The telephoto lens of concern has also undergone tremendous changes. If we only look at the hardware, the iPhone is indeed lagging far behind. Maybe Apple is also aware of this problem.

Huawei Imaging XMAGE: Ten major trends will set the tone for the new direction of mobile imaging in the future Jun 01, 2024 pm 12:27 PM

The development history of the P series is the history of the development of moving images. On the occasion of the 12th anniversary of the birth of the P series, Huawei sets out again with its deep understanding of mobile imaging and future plans. From the emergence of the concept of moving images to its gradual development and growth, Huawei has always played an important role as a leader, becoming the main way for millions of users to record their lives. Today, when the industry is desperately innovating in three dimensions: stacking hardware, improving image quality, and bundling traditional imaging brand styles, we clearly see that homogeneous hardware stacking and algorithm optimization cannot truly differentiate each brand. There is a gap in image capabilities, and more importantly, specific image styles have been difficult to adapt to the individual needs of consumers. Standing at a higher dimension and thinking about the next development direction of mobile imaging, Huawei is the leader.

200 million pixel image of Thanos! Vivo X100 Ultra real phone hands-on: huge ring camera May 07, 2024 am 09:50 AM

According to news on May 7, vivo will hold a new product launch conference on May 13, and will release the vivoX100s series and vivoX100Ultra. In addition, vivo’s new imaging technology brand blueprint imaging will also be unveiled at the conference. Recently, vivo's official flagship store released a hands-on video of the vivo X100 Ultra real machine. The back of the new machine adopts a new lens layout and has a huge ring-shaped camera module, including the main camera, periscope telephoto and ultra-wide-angle lenses. Vivo also added a circle of brushed metal texture outside the lens ring, and the details are very exquisite. Vivo brand vice president Jia Jingdong said during the warm-up that vivoX100Ultra is an "image destroyer" and was originally developed internally by vivo.

OPPO Find X7 is a masterpiece! Capture your every moment with images Aug 07, 2024 pm 07:19 PM

In this fast-paced era, OPPO Find X7 can use its imaging power to let us savor every beautiful moment in life. Whether it's magnificent mountains, rivers, lakes, or seas, warm family gatherings, or encounters and surprises on the street, it can help you record them with "unparalleled" picture quality. From the outside, the camera Deco design of Find It looks very recognizable and has a high-end feel. The inside is also unique, starting with the basic hardware configuration. FindX7 maintains the previous

Xiaomi Mi 14 Ultra is equipped with a professional photography handle, and the phone can be instantly upgraded to a camera Jan 17, 2024 pm 03:36 PM

According to news on January 17, Xiaomi 14Ultra has not yet been released, and accessories will come first. Recently, Xiaomi’s new product "Professional Photography Grip (Power Bank)" passed 3C certification, and the manufacturer is Lens Technology. Referring to the professional photography suit of Xiaomi 13 Ultra, this new professional photography handle is obviously prepared for Xiaomi 14 Ultra and is expected to bring new gameplay. Xiaomi 13Ultra professional imaging suit It is understood that Xiaomi 13Ultra launched a professional photography suit at the same time when it was released. The price is 999 yuan. It was once sold to about 1,500 yuan on second-hand platforms, which is quite popular. The photography kit includes a technological nano-leather protective case and a wireless photography handle. The protective case can also be connected with a 67mm filter adapter ring to allow the mobile phone to

Former Huawei chief imaging engineer Luo Wei joins Honor: shares photos publicly Jul 29, 2024 am 09:01 AM

It is reported that Luo Wei, who once served as Huawei's chief imaging engineer, has joined Honor's imaging team in a low-key manner, which will definitely bring a qualitative improvement to the imaging performance of Honor mobile phones. Just today, Luo Wei posted a set of Huanghuashui Great Wall-themed photos on his personal Weibo, from Honor Magic 6 Ultimate Edition and Honor Magic 5 Pro, with the text "Test it out." This undoubtedly supports the statement that Luo Wei has joined Honor and has started working. In the comments on Weibo, some netizens asked about the macro issue of Honor Magic 6 Pro. When shooting close up, the wide-angle and telephoto lenses conflict and the lens will repeatedly jump across the lens. In response, Luo Wei quickly responded, saying that there would be no problems after upgrading the version. In addition, Honor MagicV3 has launched

Walked 30,000 steps in Zhaoqing, immersed in the image charm of Nubia Z60 Ultra Aug 10, 2024 pm 09:34 PM

What is your favorite lens when taking photos? My answer is 35mm fixed focus (calculated based on equivalent full-frame focal length, the same below). In the mobile phone market, Nubia is the only one equipped with a native 35mm main camera. When everyone claims to be the "image flagship", the Nubia Z60 Ultra leading version is the most camera-like among the mobile phones we have used this year, with low distortion 18mm ultra-wide angle, 35mm humanistic main camera and 85mm telephoto. The lens quality is very good, and with the sliding button, you can quickly turn on/off the camera, which feels like a card camera. Because this phone is very special, this experience will also be a bit special. I will use this Nubia Z60 Ultra leading version to record a weekend spent in Zhaoqing. relaxation

See all articles