Работа с формой на сайте с 3-д анимацией - JavaScript, Ajax

Татьяна05 · 01.08.2023, 16:11

Здравствуйте! Я совсем новичок и JS мне даётся не так легко, как хотелось бы... Подружка попросила меня сделать ей сайт с красивой 3-д анимацией. К счастью, видеоуроков полно, но ей нужна ещё форма обратной связи. В HTML вставить-то её легко, а взаимодействовать - нет( Помощь была бы, кстати...А после этого сайта, обещаю, я займусь JS вплотную)))

Код:

<body>
  <div class="container">
<section class="gallery">
    <div class="frame">
       <div class="frame__content">
        <h2>Профессиональный коучинг On-line</h2>
       </div>
    </div>

    <div class="frame">
        <div class="frame__content">
            <div class="frame-media frame-media_left" style="background-image: url(css/img/IMG_3975.jpg);"></div>
        </div>
    </div>

  <div class="frame frame_bg">
        <div class="frame__content">
            <video class="frame-media frame-media_right" src="css/img/видео/book_-_51719 (360p).mp4" autoplay loop muted></video>
        </div>
    </div>

<div class="frame"></div>

    <div class="frame">
        <div class="frame__content text-right">
           <h3>Обо мне</h3>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid error reprehenderit est et? Distinctio, repudiandae.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid error reprehenderit est et?</p>
        </div>
    </div>

    <div class="frame frame_bg">
        <div class="frame__content">
            <div class="frame-media frame-media_left" style="background-image: url(css/img/Саша1.jpg);"></div>
        </div>
    </div>
    
    <div class="frame"></div>

    <div class="frame">
        <div class="frame__content">
            <div class="frame-media frame-media_right" style="background-image: url(css/img/paper-brain-with-chat-bubbles.jpg);"></div>
        </div>
    </div>

    <div class="frame frame_bg">
        <div class="frame__content text-left">
           <h3>Что и для чего</h3>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid error reprehenderit est et? Distinctio, repudiandae.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid error reprehenderit est et?</p>
        </div>
    </div>


    <div class="frame"></div>

    <div class="frame">
        <div class="frame__content text-left">
           <h4>Преимущества коучинга</h4>
           <ul class="advantages-list">
            <li class="advantages-p">Первое преимущество</li>
            <li class="advantages-p">Второе преимущество</li>
            <li class="advantages-p">Третье преимущество</li>
        </ul>
        </div>
    </div>
    
    <div class="frame"></div>
    <div class="frame"></div>
   
    <div class="frame">
        <div class="frame__content">
            <div class="frame-media frame-media_right" style="background-image: url(css/img/pexels-alex-green-5699432.jpg);"></div>
        </div>
    </div> 

    <div class="frame"></div>

 <div class="frame frame_bg">
        <div class="frame__content">
            <div class="wrapper__forForm">
                <div class="form">
                    <form action="mail.php" id="form" class="form" method="POST">
                        <h4 id="certificate4" class="form__title">Электронная запись</h4>
                        <div class="form__item ">
                            <label for="formName" class="form__label">Фамилия и имя*:</label>
                            <input id="formName" class="input input-name" type="text" name="user__name">
                        </div>
                        <div class="form__item ">
                            <label for="formPhone" class="form__label">Телефон*:</label>
                            <input id="formPhone" class="input input-phone" type="number" name="user__phone">
                        </div>
                        <div class="form__item ">
                            <label for="formDate" class="form__label">E-mail:</label>
                            <input id="formDate" class="input input-date" type="text" name="user__date">
                        </div>
                        <div class="form__item ">
                            <label for="formMessage" class="form__label">Комментарий:</label>
                            <textarea name="message" id="formMessage" class="form__input"></textarea>
                            <button type="submit" class="form__button">Отправить</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

   
    

    <div class="frame frame_bg">
        <div class="frame__content">
            <video class="frame-media" src="css/img/видео/book_-_51719 (360p).mp4" autoplay loop muted></video>
        </div>
    </div>

    <div class="frame"></div>
    <div class="frame"></div>
    
    <div class="frame">
        <div class="frame__content text-end">Какой-нибудь текст</div>
    </div>
</section>
  </div>  
</body>
</html>

Код:


 let zSpacing = -1000,
lastPos = zSpacing / 5,
$frames = document.getElementsByClassName('frame'),
frames = Array.from($frames),
zVals = []



window.onscroll = function() {
    let top = document.documentElement.scrollTop,
    delta = lastPos - top

    lastPos = top

    frames.forEach(function(n, i){
zVals.push((i * zSpacing) + zSpacing)
zVals[i] += delta * -5
let frame = frames[i], 
transform = `translateZ(${zVals[i]}px)`,
opacity = zVals[i] < Math.abs(zSpacing) / 1.8 ? 1 : 0
frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`)

    })
}
 

window.scrollTo(0, 1)

ADSoft · 02.08.2023, 07:46

конкретно какой вопрос? что подразумевается под словом - взаимодействовать?

Татьяна05 · 02.08.2023, 10:45

Невозможно нажать на поле

Татьяна05 · 02.08.2023, 10:47

Невозможно нажать на поле и кнопку отправить

ADSoft · 02.08.2023, 12:08

намудрили с z-index похоже ... так не видно ))
есть в интернете адрес - глянуть?

02.08.2023, 07:46	#2
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,160	конкретно какой вопрос? что подразумевается под словом - взаимодействовать? Сайты, приложения, автоматизация в широком смысле слова

02.08.2023, 12:08	#5
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,160	намудрили с z-index похоже ... так не видно )) есть в интернете адрес - глянуть? Сайты, приложения, автоматизация в широком смысле слова

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Проблема с анимацией кнопки на сайте	musaisaev	HTML и CSS	0	01.07.2019 12:42
работа с анимацией в x3d	илья123456	Помощь студентам	0	06.04.2019 14:26
Помогите с формой заказа на сайте!Хелп.	tatty1106	PHP	5	20.10.2016 20:58
Работа с формой.	levohotnik	Microsoft Office Excel	12	09.02.2010 16:24
Работа с анимацией в ACCESS	kuk132	Microsoft Office Access	1	17.07.2008 14:07

02.08.2023, 10:45	#3
Татьяна05 Новичок Джуниор Регистрация: 01.08.2023 Сообщений: 3	Невозможно нажать на поле

02.08.2023, 10:47	#4
Татьяна05 Новичок Джуниор Регистрация: 01.08.2023 Сообщений: 3	Невозможно нажать на поле и кнопку отправить