Ten Responsive Pages Projects
Connect 53 special effects:
As usual, the preview address is http://www.goldenaarcher.com/html-css-js-proj/ , git address: https://github.com/GoldenaArcher/html-css-js-proj
All apps have only one page except the last Paypal Clone
Regarding loading different styles of css, if you want to optimize, you can use an answer from How to load different css file depending on window width: smaller size not recognized here to get the viewport of the current page and download the corresponding CSS:
<head>
<link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
<link
href="/static/mobile.css"
media="(max-width: 500px)"
rel="stylesheet"
type="text/css"
/>
<link
href="/static/main.css"
media="(min-width: 500px)"
rel="stylesheet"
type="text/css"
/>
</head>
Relatively speaking, it can reduce the content of some download codes, but if you cut too many files, the HTML sending request will also cause a certain amount of pressure on the backend... Although static pages + pictures are not too many websites, such a problem Usually it's not too big.
Food Application
The whole page is divided into four parts. Specifically, it is a relatively simple implementation. For responsive debugging, it is basically the difference in font size, padding, and line breaks.
proj 1 landing page
This implementation is quite simple, and the small screen mode is actually not much different from the home page
The implementation here is divided into a navbar (position is fixed), and then a set of jumping icons (skew + transformation) to achieve, this needs to be implemented with JS.
Both the displacement and hover of the navbar use transitions. This has been written a lot in the previous small special effects, so I won’t go into details.
menu
There is also basically no difference between the large screen and the small screen, the only difference lies in the layout (flex-wrap is set to wrap, and then the size of the card is controlled)
gallery
Same as above, but the hover effect of the menu here is still pretty good
The implementation of the border is done by controlling box-shadow, scale and blur:
.food-img {
width: 24vw;
height: 15vw;
object-fit: cover;
box-shadow: 0.3rem 0.3rem 0.1rem #e92929, 0.5rem 0.5rem 0.1rem #a2e946,
0.7rem 0.7rem 0.1rem #297ce9, 0.9rem 0.9rem 0.1rem #e92999;
transition: all 0.5s;
}
.gallery-link:hover .food-img {
box-shadow: 1rem 1rem 0.1rem #e92929, 2rem 2rem 0.1rem #a2e946,
3rem 3rem 0.1rem #297ce9, 4rem 4rem 0.1rem #e92999;
transform: scale(1.1);
filter: blur(0.5rem);
opacity: 0.5;
}
proj1 footer
footer nothing to say
Creative Design
The main thing here is to add a new one to the HTML scroll-behavior: smooth, so that the process of jumping to the page through nav can be softened, instead of just swiping the background of the page and jumping. The other is the ripple effect of the landing page.
In addition, I personally think that the color matching of this background is very problematic. I tried the contrast test:
This contrast is definitely unqualified. It is better to do the page design with the accessibility test and the WCAG AAA standard...
pro2 landing
The effect of the entire homepage is as follows:
The ripple effect is as follows:
The realization principle is to make the two squares rotate at different speeds due to the visual difference
The square itself is not deformed, but simply rotated. This technique is really quite clever
Customer
The trick here is that the border can be realized by using box0shadow, which can form a softer border, and this kind of alignment, if there are only 3 cards, can be formed by flex+ align flex-end or flex-start
Then... Contrast is really important... I can hardly see the word customers on my laptop, and I feel like I'm going blind when I stare at it...
Team
The layout technique is the same as that of the card, and the special effects here are interesting:
Change transform-origin+ through skew+, because there is a border-radius setting, so the background is larger than the card, and overflow: hidden is also required.
Contact
Here's a 3d effect, not used much but quite clever:
Business Agency
Generally speaking, the use of some JS is quite interesting here, and CSS is not particularly skillful, and the previous or previous special effects are basically mentioned
proj3 landing
Here there is a CSS effect of word jumping on the homepage:
This is also achieved using animation+animation delay.
proj3 about us
Here the video does not use the native videocontrol, but the control written with JS+fontawesome icon+HTML/CSS:
There is nothing to say about the CSS part. It is mainly the realization of some positioning. The JS part uses some attributes provided by the video to perform calculations to redraw the progress bar:
The complete control process is as follows:
const video = document.querySelector('.video');
const btn = document.querySelector('.buttons button i');
const bar = document.querySelector('.video-bar');
const playPause = () => {
if (video.paused) {
video.play();
btn.className = 'far fa-pause-circle';
video.style.opacity = '.7';
} else {
video.pause();
btn.className = 'far fa-play-circle';
video.style.opacity = '.3';
}
};
btn.addEventListener('click', () => {
playPause();
});
video.addEventListener('timeupdate', () => {
const barWidth = video.currentTime / video.duration;
bar.style.width = `${
barWidth * 100}%`;
if (video.ended) {
btn.className = 'far fa-play-circle';
video.style.opacity = '.3';
}
});
proj3 pricing
Pricing is implemented with swiperjs. I followed the tutorial and found that it doesn’t work. You need to add backface-visibilit, otherwise the content displayed before and after is the same.
.pricing-card-back,
.pricing-card-front {
backface-visibility: hidden;
}
proj3 contact
no big difference
Apple eCommerce
The special effects of this project are really interesting, but the dependence on JS is a bit high
Here is a small tip. If you modify the font color, you will modify the position of the element and make the CSS deform. You can consider using scale to zoom in and out
proj5 landing
This is a video with a big gap between the mobile terminal and the desktop version
You can see that the desktop version has more interactions, and the rotating iPhone here on the mobile side becomes the background. There must be 3D special effects turned on here. The interactive effects are as follows:
This is also realized by JS. The up and down control is the x axis, the left and right y, and the oblique one is z. The realization is as follows:
document.querySelector('.top-x-control').addEventListener('click', () => {
cube.style.transform = `rotateX(${
(x += 20)}deg) rotateY(${
y}deg) rotateZ(${
z}deg)`;
});
document.querySelector('.bottom-x-control').addEventListener('click', () => {
cube.style.transform = `rotateX(${
(x -= 20)}deg) rotateY(${
y}deg) rotateZ(${
z}deg)`;
});
document.querySelector('.left-y-control').addEventListener('click', () => {
cube.style.transform = `rotateX(${
x}deg) rotateY(${
(y -= 20)}deg) rotateZ(${
z}deg) `;
});
document.querySelector('.right-y-control').addEventListener('click', () => {
cube.style.transform = `rotateX(${
x}deg) rotateY(${
(y += 20)}deg) rotateZ(${
z}deg) `;
});
document.querySelector('.top-z-control').addEventListener('click', () => {
cube.style.transform = `rotateX(${
x}deg) rotateY(${
y}deg) rotateZ(${
(z -= 20)}deg) `;
});
document.querySelector('.bottom-z-control').addEventListener('click', () => {
cube.style.transform = `rotateX(${
x}deg) rotateY(${
y}deg) rotateZ(${
(z += 20)}deg) `;
});
Generally speaking, the framework of CSS is set up, and JS is easy to write here
iphone
Relatively simple implementation, the background is implemented through skew
macbook
This boot animation is written in pure CSS, which is really powerful:
The implementation steps are as follows:
-
Use suitable images to create a half-open state of the mac screen
This is also achieved through two pictures, and the side of the keyboard away from the person is used as the x-axis to rotate the screen on the x-axis to realize the state of switching the screen
-
Display black screen and loading status
Here is mainly the time difference created by the animation delay. It is not difficult to realize the black screen itself and the loading bar, but the animation-delay must be set properly.
-
Show the status of the boot
The key is also the setting of animation-delay
It is actually not very difficult to realize, mainly because the ingenuity is very good
iwatch
The implementation of this part mainly depends on JS, but it is really interesting. I don’t know if it’s Apple’s own implementation, or it’s up. I also went to Apple’s official website to have a look. The latest implementation is based on video. .
The main thing is to modify the corresponding margin according to the click time, as follows:
watchTopControl.addEventListener('click', () => {
watchCases.style.marginTop = `${
(axisY -= 70)}rem`;
hideControl();
});
watchBottomControl.addEventListener('click', () => {
watchCases.style.marginTop = `${
(axisY += 70)}rem`;
hideControl();
});
watchRightControl.addEventListener('click', () => {
watchBands.style.marginRight = `${
(axisX += 70)}rem`;
hideControl();
});
watchLeftControl.addEventListener('click', () => {
watchBands.style.marginRight = `${
(axisX -= 70)}rem`;
hideControl();
});
The CSS part adds a transition to the margin.
airpods
There is nothing special about this, the main thing is to modify the layout of the mobile terminal.
footer
The icons should be picked up from apple
personal webpage
The skills here are basically said, just paste the picture directly
There is no big difference in the layout of the mobile terminal, it is nothing more than the flattening of the cards.
Here, my personal skills use JS to do a percentage calculation, and then implement a transition, but there are too many similar ones.
The highlighting of nav is achieved by comparing the current scrollYand div's scrollY.
By the way, the percentage of this skill... how is it calculated...
Cars
There is also nothing particularly difficult. They are all relatively simple CSS, and the JS part is not used much. The main thing is the navbar click event. Just post a picture and finish.
The shelf special effect here needs to be added transform-style: preserve-3d;or a 3D environment can be created separately with perspective. I don’t know if the 3D environment has changed. I hope this is not used in the code of the tutorial...
video gallery There is an operation of playing video on mouseover, which is no different from the click above, so I won’t repeat it here, just change the click event
Architect
There are a few places in this project that are quite interesting, so let me talk about them a little bit
proj7 landing page
There is not much difference between the mobile terminal and the computer terminal of this page. The main reason is that there is a gradual zoom-in effect of the picture:
This is also achieved through transition, no need for infinite, just transition for a while. If you use scale, you don’t need to control too much. If you use left/position, the positioning of bg is still more important
About Us
This is very interesting in reality, because it is implemented with grid+place-item:
At first I thought it was written using positioning, but I didn't expect it...
However, for the convenience of implementation, it is tiled below the large device:
Our Team
Here is an implementation of tilt, but it is done with tilt.js, the effect is as follows:
Related effects can be viewed on their official website:
Contact
A section with no characteristics
Tours
There are also a few neat points
proj8 landing
There are two points here, the first one is that the logo (word) will jump, this can also be achieved by using transition+delay
The second is the dynamics of the balloon. To achieve this effect, you need to open the 3D environment and let the png move along the xyz axis in sequence (using keyframe). The final choice can make the balloon float back, repeat the cycle, or let the the balloon stays somewhere
tour list
Here is a front and rear replacement effect of the card, which can also be done with a relatively simple 3D
review
There is nothing to say about the layout here, the background is played with video, the code is as follows:
<div class="video-container">
<video class="bg-video" autoplay muted loop>
<source src="images/video.mp4" type="video/mp4" />
</video>
</div>
Here the mobile terminal returns to the normal layout to save a little space, instead of continuing to use the skew concave shape:
contact
This contact page is not very difficult, but the background color will continue to change gradually, which is still a bit atmospheric
footer
Here is also a relatively common design
wine house
This whole is made into a ppt-style structure. It was originally planned to be completed with the mouse wheel and click events. I tried it, and the gestures of the notebook can also be used, but because the corresponding gestures have not been implemented, JS cuts the picture very quickly. It basically collapsed, and sometimes it would slide through four or five pictures at once.
The layout looks roughly like this:
What is changed is the background picture and the content in the middle, probably one or two pictures and words.
In addition, CSS is quite simple. Position:absolute is used extensively to complete the positioning. The content is also quite simple. There is nothing to say. The more difficult thing is the implementation of JS:
let counter1 = 0;
let counter2 = 1;
let bool = true;
const sections = document.querySelectorAll('section');
const progress = document.querySelector('.progress h2');
const circles = document.querySelectorAll('.circle');
const menu = document.querySelector('.menu');
const section1wrapper = document.querySelector('.section-1-wrapper');
const section5wrapper = document.querySelector('.section-5-wrapper');
section1wrapper.style.transform = 'scale(1)';
const progressCounter = () => {
progress.textContent = `${
counter2}/${
sections.length}`;
Array.from(circles).forEach((circle) => {
circle.style.backgroundColor = 'transparent';
});
document.querySelector(`.circle-${
counter2}`).style.backgroundColor = '#ddd';
};
const pageController = () => {
bool = true;
if (counter1 === 5) {
Array.from(sections).forEach((section) => {
section.style.left = '0';
});
counter1 = 0;
counter2 = 1;
section1wrapper.style.transform = 'scale(1)';
section5wrapper.style.transform = 'scale(1.5)';
progressCounter();
bool = false;
}
if (counter1 === -1) {
Array.from(sections).forEach((section) => {
if (section.classList[0] === 'section-5') {
return;
}
section.style.left = '-100vw';
});
counter1 = 4;
counter2 = 5;
section1wrapper.style.transform = 'scale(1.5)';
section5wrapper.style.transform = 'scale(1)';
progressCounter();
bool = false;
}
progressCounter();
return bool;
};
window.addEventListener('wheel', (e) => {
const deltaY = e.deltaY > 0;
if (deltaY) {
counter1++;
counter2++;
} else {
counter1--;
counter2--;
}
pageController();
progressCounter();
console.log(counter1, counter2);
if (bool) {
document.querySelector(
`.section-${
deltaY ? counter1 : counter2}`
).style.left = `${
deltaY ? '-100vw' : '0'}`;
document.querySelector(
`.section-${
deltaY ? counter1 : counter2}-wrapper`
).style.transform = `scale(${
deltaY ? '1.5' : '1'})`;
document.querySelector(
`.section-${
deltaY ? counter1 + 1 : counter2 + 1}-wrapper`
).style.transform = `scale(${
deltaY ? '1' : '1.5'})`;
}
});
document.querySelector('.left-btn').addEventListener('click', () => {
counter1--;
counter2--;
pageController() &&
(document.querySelector(`.section-${
counter2}`).style.left = '0');
if (bool) {
document.querySelector(`.section-${
counter2}-wrapper`).style.transform =
'scale(1)';
document.querySelector(`.section-${
counter2 + 1}-wrapper`).style.transform =
'scale(1.5)';
}
});
document.querySelector('.right-btn').addEventListener('click', () => {
counter1++;
counter2++;
pageController() &&
(document.querySelector(`.section-${
counter1}`).style.left = '-100vw');
if (bool) {
document.querySelector(`.section-${
counter2}-wrapper`).style.transform =
'scale(1)';
document.querySelector(`.section-${
counter1}-wrapper`).style.transform =
'scale(1.5)';
}
});
document.querySelector('.grapes-img').addEventListener('mouseover', () => {
document.querySelector('.section-3-wrapper').style.opacity = '.5';
});
document.querySelector('.grapes-img').addEventListener('mouseout', () => {
document.querySelector('.section-3-wrapper').style.opacity = '1';
});
menu.addEventListener('click', () => {
document.querySelector('.navbar').classList.toggle('change');
});
Paypal Clone
Because there is a reference prototype, so this is not very fancy
The change of the navbar is a little interesting. The big screen is expanded, and the small screen uses the hamburger icon. The main thing is to use the media query and select which div to display. The other parts are the login and registration forms, which is nothing. easy to say.
The lack of pictures seems to be because I have uploaded pictures to the upper limit, and now the pictures on csdn cannot be uploaded... Before I waited for two hours to post a few pictures, but now it fails again