https://github.com/notacat1/horizontal-parallax-scrolling
This website is a guide for creating horizontal sliders using the Swiper library, known for its simplicity and versatility in building slideshows, carousels, and galleries on web pages.
https://github.com/notacat1/horizontal-parallax-scrolling
css horizontal-scrolling parallax particles-js swiper-js
Last synced: 6 months ago
JSON representation
This website is a guide for creating horizontal sliders using the Swiper library, known for its simplicity and versatility in building slideshows, carousels, and galleries on web pages.
- Host: GitHub
- URL: https://github.com/notacat1/horizontal-parallax-scrolling
- Owner: NotACat1
- Created: 2023-03-03T08:29:46.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-01T09:40:44.000Z (almost 3 years ago)
- Last Synced: 2025-01-11T10:17:33.350Z (over 1 year ago)
- Topics: css, horizontal-scrolling, parallax, particles-js, swiper-js
- Language: HTML
- Homepage: https://notacat1.github.io/Horizontal-parallax-scrolling/
- Size: 4.63 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Горизонтальный скролл с параллакс-эффектом
## О проекте
[Данный веб-сайт]() представляет собой практическое руководство по созданию горизонтального слайдера с использованием мощной библиотеки Swiper. Swiper - это интуитивно понятная и гибкая библиотека, разработанная специально для создания разнообразных слайд-шоу, каруселей и галерей на веб-страницах. Благодаря её простой интеграции и богатому функционалу, вы сможете легко добавить интерактивные слайды на ваш сайт без головной боли.
Идея взята с видеоурока: [https://youtu.be/QFq6PiZ1BQ8](https://youtu.be/QFq6PiZ1BQ8).
## Реализованный функционал
### Горизонтальный скролл
Горизонтальный скролл - это интересная и нестандартная фишка, которая может добавить оригинальности и интерактивности вашему веб-сайту. Он позволяет пользователям переключаться между разными слайдами горизонтально, создавая визуально привлекательный и современный дизайн. В сочетании с возможностью пользователей предоставлять контент для каждого слайда, это может создать динамичное и увлекательное взаимодействие.
### Параллакс эффект
Параллакс-эффект – это действительно интересная и эффектная техника в веб-дизайне. Он создает впечатление глубины и движения, путем движения фоновых элементов в разной скорости по отношению к переднему плану. Это добавляет динамичности и визуального интереса на вашем веб-сайте.
### Фоновые частицы
Фоновые частицы являются отличным способом придать вашему веб-сайту дополнительную динамику и визуальный интерес. Они создают ощущение движения и живости на фоне, что делает пользовательский опыт более привлекательным и увлекательным.
## Используемые технологии
### 1. Swiper
[Swiper.js](https://swiperjs.com/) - это современная, мощная и гибкая библиотека для создания интерактивных слайд-шоу, галерей и каруселей на веб-сайтах. Она предоставляет интуитивно понятный интерфейс и богатый набор опций, позволяя разработчикам легко создавать динамичные и привлекательные интерактивные элементы.
### 2. Particles.js
[Particles.js](https://marcbruederlin.github.io/particles.js/) - это легковесная JavaScript библиотека для создания красочных и анимированных фоновых частиц на веб-сайтах. Она позволяет добавить визуальную динамику и эффектность, создавая ощущение движения и интерактивности на фоне страницы.
### 3. Normalize.css
[Normalize.css](https://necolas.github.io/normalize.css/) предоставляет браузерам возможность более последовательного отображения всех элементов согласно современным стандартам. Он акцентируется на нормализации только тех стилей, которые действительно требуют коррекции.
```css
/* index.css */
@import url(../vendor/normalize.css);
```
### 4. Webpack
[Webpack](https://webpack.js.org/) - это инструмент с открытым исходным кодом для сборки веб-приложений. Он позволяет объединять различные файлы, такие как HTML, CSS, JavaScript, изображения, в единый пакет для оптимизированной доставки на веб-сервер. Webpack также поддерживает использование различных загрузчиков и плагинов, что облегчает процесс разработки, минимизации и управления зависимостями.
Настройки Webpack:
```js
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
main: './src/pages/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
publicPath: '',
},
mode: 'development',
devServer: {
static: path.resolve(__dirname, './dist'),
open: true,
compress: true,
port: 8080
},
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader',
exclude: '/node_modules/'
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
type: 'asset/resource',
generator: {
filename: 'images/[name].[hash][ext]',
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[name].[hash][ext]',
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, {
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin(),
]
}
```
#### 4.1 Babel
[Babel](https://babeljs.io/) - это инструмент для транспиляции кода на JavaScript. Он позволяет разработчикам писать код, используя современные функции языка, которые могут быть не поддержаны всеми браузерами. Babel преобразует этот код в совместимый с более старыми версиями браузеров, обеспечивая кросс-браузерную поддержку и совместимость.
Настройки Babel:
```js
// babel.config.js
const presets = [
['@babel/preset-env', {
targets: {
edge: '17',
ie: '11',
firefox: '50',
chrome: '64',
safari: '11.1'
},
useBuiltIns: "entry"
}]
];
module.exports = { presets };
```
#### 4.2 PostCSS
[PostCSS](https://postcss.org/) - это инструмент для обработки и трансформации кода CSS. Он позволяет разработчикам применять различные плагины к CSS коду, автоматизируя задачи, такие как автопрефиксинг, оптимизация, генерация переменных и многое другое. PostCSS гибкий и настраиваемый, что позволяет адаптировать его под конкретные потребности проекта.
Настройки PostCSS:
```js
// postcss.config.js
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
module.exports = {
plugins: [
autoprefixer,
cssnano({ preset: 'default' })
]
};
```