Zoom picture display special effects
First look at the final effect of this special effect:
First, let’s analyze what functions this effect has.
- First, the initial effect is 6 columns, which respectively show part of the picture
- When entering the page or refreshing the page, each list has a certain time interval, which has a sense of dislocation
- When the mouse moves into each column, each column will change
- When the mouse clicks on each column, the current picture will be expanded, the rest of the pictures will be hidden, and a title and a close button will appear on the picture at the same time
- When closing each column, the current picture will be tightened and restored to the initial state
At first glance, it looks very complicated, but this special effect really uses 99% of the css3 attributes, just a little bit of js is used when opening and closing and switching class names.
So how to achieve it?
Step 1: Make an initialization page
The main idea is that there are 6 li in one ul
Of course, here I also wrapped a big box outside, and now attach the code of each li
<li class="item ">
<div class="pic_area">
<div class="pic"></div>
<div class="title"><h2>Mellifluous</h2></div>
<div class="txt">
<div class="header">cloud1</div>
<div class="close"></div>
</div>
</div>
</li>
Talk about the meaning of each class name:
- The pic-area is where we finally put the picture, because when looking at the final shaping effect, we can find that there will be a gray background when refreshing, so we need to open a new picture area to achieve this effect.
Next, we set the width and height of the container and arrange them horizontally,
.wrapper .container{
width: 800px;
height: 600px;
display: flex;
justify-content: space-between;
align-items: center;
/* 使用弹性盒子布局，给每一列确定位置*/
}
.item{
width: 16%;
height: 100%;
border-radius: 25px;
/* 设置圆角，每一列的宽度为总的16%*/
overflow: hidden;
background-color: #424242;
}
It is almost like this effect and then add a background image to each one, (set in the pic) the background image position is center size is cover, and then the title in the middle depends on absolute positioning, and at the same time, set the relative positioning for its parent pic-area, through Pan to achieve the center, there are some small details on the size of the position, please adjust it slowly
Note that when setting the rounded corners, you must set overflow: hidden, because we are using a background image. Although the border becomes rounded, the box itself is still square.
.item .pic_area{
height: 100%;
width: 100%;
transition: transform 0.5s;
position: relative;
}
.item .pic{
background-size: cover;
background-position: center;
opacity: 0.6;
}
.item:nth-of-type(1) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq1.jpg);
}
.item:nth-of-type(2) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq2.jpg);
}
.item:nth-of-type(3) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq3.jpg);
}
.item:nth-of-type(4) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq4.jpg);
}
.item:nth-of-type(5) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq5.jpg);
}
.item:nth-of-type(6) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq6.jpg);
}
.item .title{
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateY(-50%);
transform: translateX(-50%);
font-size: 12px;
transition: 0.5s opacity linear 1s;
}
In the above code, the initial transparency of each column is also set: opacity: 0.7
Next, the effect of mouse
movement is added: the transition property makes the animation look more natural, and the linear makes the change uniform.
.title h2{
transition: font-size 0.3s linear;
}
.item:hover h2{
font-size: 22px;
}
.item:hover .pic{
opacity: 1;
transition: opacity 0.3s linear;
}
So far the whole effect has begun to take shape
The second step: the page enters the special effects, and the realization of the sense of dislocation
Here we will use a little js to control its class name
.init .item .pic_area{
transform: translate3d(0 ,100%,0);
}
Here init is the class name that I added to ul at the beginning, that is to say, when my ul has init, I have to translate 100% of his own along the y-axis. Although it is only translation on one coordinate axis, I still Started 3d, because GPU acceleration will be used after 3d, so the animation will be more silky ~
Next we will control this class name through js:
var timer = setTimeout(function(){
$('.container').removeClass('init');
},300)
Because this effect only needs to be executed once, the timeout delayer is used to do it, and the init class name is removed 300 milliseconds after entering the page
. The jQuery syntax is used here, and the same is done with native js.
Then the effect we get should be that six columns move at the same time.
So next:
.item:nth-of-type(2) .pic_area{
transition-delay: 0.1s;
}
.item:nth-of-type(3) .pic_area{
transition-delay: 0.2s;
}
.item:nth-of-type(4) .pic_area{
transition-delay: 0.3s;
}
.item:nth-of-type(5) .pic_area{
transition-delay: 0.4s;
}
.item:nth-of-type(6) .pic_area{
transition-delay: 0.5s;
}
By increasing the delay through css3, you can achieve a sense of dislocation
Step 3: Turn on the effect
Carefully observe the completed picture, we find that after clicking, the selected column does not move, the remaining height is reduced first, and then the width is reduced, and then the width of the selected column becomes larger
The style is also controlled by the class name
.active{
width: 100%;
/* 这个类名要加在item上 */
}
.container-active .item:not(.active){
height: 0%;
width: 0%;
/* container-active这个类名要加在container */
}
Not is the style without a certain class name, that is, when the item has an active class name, the width becomes 100%, and the width and height of the class name without active become 0%, but this has a disadvantage, that is At the beginning we just couldn't see anything, because at the beginning all the items were not active, and the active was added by js, so a container-active class name was added to his parent, and his parent has this class When the name is selected, the child element item will activate this effect, which is equivalent to a switch, so that under normal circumstances, all items will not disappear. The
following is the jq code, the original js principle is the same:
$('.item').click(function () {
// 给每一个item注册一个点击事件，实现打开列的效果
$(this).addClass('active');
$('.container').addClass('container-active');
});
Then continue to observe the completed picture, the width and height changes are sequential
.container-active .item{
transition: height 0.5s linear,width 0.5s linear 0.5s;
/* 过渡属性 高先变 0.5s完成匀速，宽后变0.5s完成匀速 有0.5s的延迟
*/
}
After opening, the title in the middle will disappear, because after opening, the parent has a class name, so this is the situation when there is a class name, and the transparency of the class name is 0.
.container-active .title{
opacity: 0;
transition: 0.2s opacity linear;
}
Step 4: Turn off the effect
First, the close button is not an X letter, or other pictures or icons, it is drawn with css
Select the close area here, and use ::after ::before to generate two small boxes, long and thin, positioned on it, one is rotated 45 degrees clockwise, the other is rotated 45 degrees counterclockwise
.item .txt .close::after{
content: "";
height: 2px;
width: 25px;
background-color: #fff;
position: absolute;
top:15px;
right: 25px;
transform: rotateZ(45deg);
}
.item .txt .close::before{
content: "";
height: 2px;
width: 25px;
background-color: #fff;
position: absolute;
top:15px;
right: 25px;
transform: rotateZ(-45deg);
}
Then our txt part, that is, the top part after opening, is hidden before opening, and then there is a position, and some styles need to be set
.item .txt{
position: absolute;
width: 100%;
height: 30px;
left: 0px;
top: 30px;
transition: opacity 0.5s linear;
opacity: 0;
}
.item .txt .header{
float: left;
margin-left: 30px;
line-height: 30px;
}
.item .txt .close{
float: right;
margin-right: 30px;
cursor: pointer;
}
.active .txt{
opacity: 1;
transition: opacity 0.5s linear 1s;
/* 这个写在active类下 是为了实现打开后出现的效果*/
}
.item .txt .close{
width: 25px;
height: 25px;
}
.item .txt .close::after{
content: "";
height: 2px;
width: 25px;
background-color: #fff;
position: absolute;
top:15px;
right: 25px;
transform: rotateZ(45deg);
}
.item .txt .close::before{
content: "";
height: 2px;
width: 25px;
background-color: #fff;
position: absolute;
top:15px;
right: 25px;
transform: rotateZ(-45deg);
}
Then register a click event to close
$('.close').click(function (e) {
e.stopPropagation();
$('.container').removeClass('container-active');
$('.item').removeClass('active');
});
While clicking close, remove the container-active class name and the active class name.
Note that because of bubbling, the class name will be added repeatedly. It will be re-added immediately after the deletion, which will cause it to not be closed. effect
Be sure to remember to use: **e.stopPropagation();** to stop bubbling
//封装兼容冒泡的函数
function stopBobble(event){
if( event.stopPropagation()){
return event.stopPropagation();
}else{
return event.cancelBobble = true ;
}
}
In fact, if you use native js to prevent bubbling, you don’t need to use compatible syntax, because all the new properties of css3 are used before. ie is not compatible, let alone bubbling. Just write it. Recall.
Then there is a small detail to pay attention to is that when it is closed, it is the opposite of the opened animation.
So add this line of code to the item
.item{
width: 16%;
height: 100%;
border-radius: 25px;
overflow: hidden;
background-color: #424242;
transition: width 0.5s linear ,height 0.5s linear 0.5s;
/* 这里和上面刚好相反 先宽后高*/
}
Finally this project is over!
You can get the project source code for free through this link