コーダスライドのように、水平方向のスライドが1つの領域を持つポートフォリオを設計しています。私の問題は、JSによって生成される幅がpxであり、ほとんどの画面解像度で機能するようにその幅を％で設定する必要があることです。何かを変更しようとすると、幅は％になりますが、スライドは垂直になります。
サンプルHTML：
<div class="scroll">
<!-- the element that will be scrolled during the effect -->
<div class="scrollContainer">
<!-- our individual panels -->
<!-- PROJECT 1 -->
<article class="panel" id="work1">
<figure><img src="images/works/project1.png" alt="Alt Text" title="Title Text"/></figure>
<header>
<h1>TITLE</h1>
</header>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu diam elit, non sodales magna. Nam ut imperdiet metus. Nam in lectus eros, non varius nunc. In elementum, urna in pulvinar vestibulum, ligula ipsum pharetra massa, ac porta neque turpis vel ligula. Morbi nec justo vitae urna luctus suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi semper cursus nisi nec tincidunt. Donec non sapien at turpis iaculis iaculis vel at eros. Phasellus dictum consectetur dui, sed imperdiet diam rhoncus et. Aliquam egestas, nisl ut pellentesque egestas, sapien orci tristique lacus, quis egestas odio enim a felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque mattis dapibus libero, nec ultrices neque iaculis nec.</p>
<p> Ut quis purus diam. Vestibulum bibendum, ipsum ac pharetra pretium, lectus justo molestie ligula, nec dignissim ante nulla non nulla. Maecenas sit amet elit metus. Nulla dignissim pretium porttitor. Cras pellentesque condimentum fringilla. Fusce ac odio convallis ante venenatis interdum et et mauris. Donec tincidunt sapien nec enim egestas sollicitudin. Proin sit amet metus ac eros commodo dapibus id vel neque. Nulla in luctus felis. Sed at urna magna, ac vestibulum neque. Nam dictum elementum pharetra.</p>
</article>
<!-- PROJECT 2 -->
<article class="panel" id="work2">
<figure><img src="images/works/project2.png" alt="Alt Text" title="Title Text"/></figure>
<header>
<h1>TITLE</h1>
</header>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu diam elit, non sodales magna. Nam ut imperdiet metus. Nam in lectus eros, non varius nunc. In elementum, urna in pulvinar vestibulum, ligula ipsum pharetra massa, ac porta neque turpis vel ligula. Morbi nec justo vitae urna luctus suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi semper cursus nisi nec tincidunt. Donec non sapien at turpis iaculis iaculis vel at eros. Phasellus dictum consectetur dui, sed imperdiet diam rhoncus et. Aliquam egestas, nisl ut pellentesque egestas, sapien orci tristique lacus, quis egestas odio enim a felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque mattis dapibus libero, nec ultrices neque iaculis nec.</p>
<p> Ut quis purus diam. Vestibulum bibendum, ipsum ac pharetra pretium, lectus justo molestie ligula, nec dignissim ante nulla non nulla. Maecenas sit amet elit metus. Nulla dignissim pretium porttitor. Cras pellentesque condimentum fringilla. Fusce ac odio convallis ante venenatis interdum et et mauris. Donec tincidunt sapien nec enim egestas sollicitudin. Proin sit amet metus ac eros commodo dapibus id vel neque. Nulla in luctus felis. Sed at urna magna, ac vestibulum neque. Nam dictum elementum pharetra.</p>
<figure>
<img src="images/works/project2a.png" class="workscenter" alt="Alt Text" title="Title Text"/><br/>
<img src="images/works/project2b.png" class="workscenter" alt="Alt Text" title="Title Text"/><br/>
<img src="images/works/project2c.png" class="workscenter" alt="Alt Text" title="Title Text"/>
</figure>
</article>
</div>
</div>
私が使用しているjSの下：
jQuery(document).ready(function($) {
// Container
var container = $('.scroll');
// Navigation
var navContainer = $('#slider .navigation');
var navLink = $('#slider .navigation li a');
// Slides
var panelsContainer = $('.scroll .scrollContainer');
var panels = $('.scroll .scrollContainer > article');
var panelWidth = panels[0].offsetWidth;
// Float all slides side by side
panels.css({
'float' : 'left',
'position' : 'relative',
'width': panelWidth,
'height': 'auto',
'opacity': 0
});
// Set the width of the first slide
container.css({
'width': panelWidth,
'height': panels[0].offsetHeight,
'overflow': 'hidden'
});
// Set the total width to allow the slide effect
panelsContainer.css({
'width': panelWidth * panels.length,
});
// Activate the first slide
navLink.eq(0).addClass('selected');
panels.eq(0).css('opacity', 1);
// Verify the links where is possible to slide
$('a').bind('click', function(e) {
var target = $(this).attr('href');
if($(target).html() !== undefined ) {
$('html, body').stop().animate({
scrollTop: $(target).offset().top
}, 1500, 'easeInOutExpo');
if($(target).parent('div').hasClass('scrollContainer')) {
$('#slider .navigation li a').removeClass('selected');
$('#slider .navigation li a[href=' + target + ']').addClass('selected');
// Actual slide
var current = $('#slider .navigation li a.selected');
// Slide to be opened
var index = current.closest('li').index();
// Dinâmica height with plus 70px at the end
container.css('height', $(target).height() + 70);
// Set the actual slide
navLink.removeClass('selected');
current.addClass('selected');
// Show the actual slide
panels.css('opacity', 1);
// Create the transition effect
$(container).scrollTo($('.scroll .scrollContainer > article').eq(index), 800);
// Hidden all others slides
setTimeout(function() {
panels.css('opacity', 0);
panels.eq(index).css('opacity', 1);
}, 800);
}
}
});
// Fix to makes right wrong projects
if(window.location.hash) {
$('a[href="' + window.location.hash + '"]:first').trigger('click');
}
})
誰かが私が欲しいものを作る方法を知っていますか？
君たちありがとう。